EverWeb Widgets HTML5

Animated Progress Bar

Progress Bar Animation


Progress bars are used quite a lot in web design. They can be added to autoplay banners to indicate the total run time or to multi page questionnaires to give a visual indication of how much has still to be completed and so on…
Apart from the visual styling, this widget allows the start and end point to be selected.
The duration of the animation can be set and also the number of times it is to be repeated if that's a requirement.

Start Point  | 20%

End Point  | 90%

Start Delay: 2 sec     Duration: 5 seconds     Iteration Count: 10

Widget Settings

Enter the required width and height.
Choose the progress bar color and set the corner radius.
Choose the background color and set the padding to show the required amount of the background.
Radius the background corners if required.
Enter the values for the progress start and end. These are percentage values so the number should be between zero and 100. Set the time for the actual animation.
Set the delay time before the animation begins if required.
Enter the number of times the animation is required to run. NOTE: The delay only occurs before the animation initiates and not before every repeat.

Widget Settings

Animated Progress Bar Widget
Animated Progress
Get The Widget