Having trouble getting help?
Contact Support
Contact Support
Animation in EJ2 TypeScript Progressbar control
10 May 20232 minutes 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.
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
}
});
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="https://cdn.syncfusion.com/ej2/29.1.33/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>
<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="percentage"></div>
</div>
</div>
</body>
</html>