JavaScript
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Events in JavaScript ProgressBar control

Value Change

valueChanged event is triggered when the progress value is changed.

Source
Preview
index.ts
index.html
import { ProgressBar, IProgressValueEventArgs } from "@syncfusion/ej2-progressbar";

let percentageProgress: ProgressBar = new ProgressBar({
  type: "Linear",
  trackThickness: 24,
  progressThickness: 24,
  value: 90,
  showProgressValue: true,
  cornerRadius: "Round",
  labelStyle: {
    color: "#FFFFFF"
  },
  animation: {
    enable: true,
    duration: 2000,
    delay: 0
  },

  valueChanged: (args: IProgressValueEventArgs) => {
    percentageProgress.progressColor = '#2BB20E';
  }
});
percentageProgress.appendTo("#percentage");
let replayBtn: HTMLElement = document.getElementById("value") as HTMLElement;
replayBtn.onclick = () => {
  percentageProgress.value = 50;
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Toast</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="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

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

</html>

ProgressCompleted

Triggers when the ProgressBar attains the maximum value.

Source
Preview
index.ts
index.html
import { ProgressBar, IProgressValueEventArgs } from '@syncfusion/ej2-progressbar';
let percentageProgress: ProgressBar = new ProgressBar({
  type: "Linear",
  trackThickness: 24,
  progressThickness: 24,
  value: 100,
  showProgressValue: true,
  cornerRadius: "Round",
  labelStyle: {
    color: "#FFFFFF"
  },
  animation: {
    enable: true,
    duration: 2000,
    delay: 0
  },

  progressCompleted: (args: IProgressValueEventArgs) => {
    args.progressColor = '#2BB20E';
  }
});
percentageProgress.appendTo("#percentage");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Toast</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="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

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

</html>
Previous
Next