Having trouble getting help?
Contact Support
Contact Support
Animation in EJ2 TypeScript Stepper control
5 Jan 20243 minutes to read
The Stepper progress state can be animated, smoothly transitioning from one step to another. You can customize the animation’s duration
and delay
by using the animation property.
You can disable the animation by setting the enable property to false
. By default, the value is true
.
Fields | Type | Description |
---|---|---|
duration | number |
Specifies the duration of the animated transition for each step. The default value is 2000 milliseconds. |
delay | number |
Specifies the delay to initiate the animated transition for each step in milliseconds. The default value is 0 . |
The example demonstrates the animation duration
and delay
settings for the Stepper.
import { Stepper } from '@syncfusion/ej2-navigations';
let animationStepper: Stepper = new Stepper({
steps: [{}, {}, {}, {}],
animation: {enable: true, duration: 2000, delay: 500}
});
animationStepper.appendTo('#stepper');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 - Stepper</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#container {
margin-top: 30px;
padding: 30px;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<nav id="stepper"></nav>
</div>
</body>
</html>