JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Events in JavaScript ProgressBar control

08 Apr 2021 / 1 minute to read

Value Change

valueChanged event is triggered when the progress value is changed.

Source
Preview
index.ts
index.html
Copied to clipboard
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;
};
Copied to clipboard
<!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
Copied to clipboard
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");
Copied to clipboard
<!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