Events in EJ2 TypeScript Progressbar control

10 May 20234 minutes to read

This section describes the Progress Bar events that will be triggered when appropriate actions are performed. Following events are available in the Progress Bar.

valueChanged - When the progress value changes, this event is triggered.
progressCompleted - When the progress reaches the maximum value, this event is triggered.
animationComplete - When animation is enabled and the progress to the value is reached, this event is triggered.
annotationRender - Before each annotation is rendered, this event is triggered.
textRender - Before the progress text is rendered, this event is triggered
load - When the control begins to render, this event is triggered.
loaded - After the control has been rendered, this event is triggered.
resized - When the window is resized, this event is triggered.

index.ts
index.html
import {ProgressBar, ProgressAnnotation, IProgressValueEventArgs, ITextRenderEventArgs, IAnnotationRenderEventArgs, ILoadedEventArgs,IProgressResizeEventArgs } from '@syncfusion/ej2-progressbar';
ProgressBar.Inject(ProgressAnnotation);

let progress: ProgressBar = new ProgressBar({
  type: 'Linear',
  trackThickness: 24,
  progressThickness: 24,
  value: 50,
  labelStyle: {
    color: '#FFFFFF'
  },
  animation: {
    enable: true,
    duration: 2000,
    delay: 0
  },
  valueChanged: (args: IProgressValueEventArgs) => {
    // Here you can customize the code.
  },
  progressCompleted: (args: IProgressValueEventArgs) => {
    // Here you can customize the code.
  },
  animationComplete: (args: IProgressValueEventArgs) => {
    // Here you can customize the code.
  },
  textRender: (args: ITextRenderEventArgs) => {
    // Here you can customize the code.
  },
  annotationRender: (args: IAnnotationRenderEventArgs) => {
    // Here you can customize the code.
  },
  load: (args: ILoadedEventArgs) => {
    // Here you can customize the code.
  },
  loaded: (args: ILoadedEventArgs) => {
    // Here you can customize the code.
  },
  resized: (args: IProgressResizeEventArgs) => {
    // Here you can customize the code.
  }
});

progress.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Progress Bar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="row linear-parent">
            <div id="element"></div>
        </div>
    </div>
</body>

</html>