ProgressAnimation
12 Sep 20258 minutes to read
Animation for progress bar
Methods
doAnnotationAnimation
Initiates annotation animation for a circular progress bar.
| Parameter | Type | Description |
|---|---|---|
| circularPath | Element |
The SVG path element representing the circular progress bar. |
| progress | ProgressBar |
The progress bar object. |
| previousEnd (optional) | number |
The previous end value of the progress. |
| previousTotal (optional) | number |
The previous total value of the progress. |
Returns void
doCircularAnimation
Initiates circular animation on the specified element.
| Parameter | Type | Description |
|---|---|---|
| x | number |
The x-coordinate of the center of the circle. |
| y | number |
The y-coordinate of the center of the circle. |
| radius | number |
The radius of the circle. |
| progressEnd | number |
The end value of the progress. |
| totalEnd | number |
The total end value of the progress. |
| element | Element |
The HTML element representing the circular progress. |
| progress | ProgressBar |
The progress bar control. |
| thickness | number |
The thickness of the circular progress. |
| delay | number |
The delay before starting the animation, in milliseconds. |
| startValue (optional) | number |
The starting value of the progress. |
| previousTotal (optional) | number |
The previous total value of the progress. |
| active (optional) | Element |
The active element to control the animation. |
Returns void
doCircularIndeterminate
Initiates circular animation for an indeterminate progress bar.
| Parameter | Type | Description |
|---|---|---|
| circularProgress | Element |
The HTML element representing the circular progress bar. |
| progress | ProgressBar |
The progress bar object. |
| start | number |
The starting value of the progress. |
| end | number |
The ending value of the progress. |
| x | number |
The x-coordinate of the center of the circle. |
| y | number |
The y-coordinate of the center of the circle. |
| radius | number |
The radius of the circle. |
| thickness | number |
The thickness of the circular progress bar. |
| clipPath | Element |
The SVG clip path element to control the animation. |
Returns void
doLabelAnimation
Initiates label animation for a progress bar.
| Parameter | Type | Description |
|---|---|---|
| labelPath | Element |
The SVG path element representing the label. |
| start | number |
The starting value of the progress. |
| end | number |
The ending value of the progress. |
| progress | ProgressBar |
The progress bar control. |
| delay | number |
The delay before starting the animation, in milliseconds. |
| textSize (optional) | number |
The size of the text. |
Returns void
doLinearAnimation
Performs linear animation on the specified element.
| Parameter | Type | Description |
|---|---|---|
| element | Element |
The HTML element to animate. |
| progress | ProgressBar |
The progress bar control. |
| delay | number |
The delay before starting the animation, in milliseconds. |
| previousWidth (optional) | number |
The previous width of the progress. |
| active (optional) | Element |
The active element to control the animation. |
Returns void
doLinearIndeterminate
Initiates linear animation for an indeterminate progress bar.
| Parameter | Type | Description |
|---|---|---|
| element | Element |
The HTML element representing the progress bar. |
| progressWidth | number |
The width of the progress bar. |
| thickness | number |
The thickness of the progress bar. |
| progress | ProgressBar |
The progress bar control. |
| clipPath | Element |
The SVG clip path element to control the animation. |
Returns void
doStripedAnimation
Performs striped animation on the specified element.
| Parameter | Type | Description |
|---|---|---|
| element | Element |
The HTML element to animate. |
| progress | ProgressBar |
The progress bar object. |
| value | number |
The value indicating the progress of the animation. |
Returns void