Search results

Animation in JavaScript ProgressBar control

20 Apr 2021 / 1 minute to read

Progress Bar support to animate the progress by using animation property. Enable the animation by setting enable property and also you can control the speed by using duration property.

Copied to clipboard
import { ProgressBar } from '@syncfusion/ej2-progressbar';

       let percentageProgress: ProgressBar = new ProgressBar({
        type: 'Linear',
        trackThickness: 24,
        progressThickness: 24,
        value: 100,
        showProgressValue: true,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <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="//" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>

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