EverWeb Widgets HTML5

Animated Bar Graph

Bar Graph Animation

Dynamic Statistics

Liven up those boring statistics with some animated bar graphs.
The example below uses five widgets with different settings.
They are placed on a background created with the Rectangle Shadow widget.

Animated Bar Graph

Widget Settings

Enter the required width and height.
Choose the bar color aand set a corner radius if required.
Choose the background color.
Set the padding to show the required amount of the background.
Set the background corner radius and then adjust the widget to fit.
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: In the above example, the duration for each bar is the same but the delay times are varied so that each one completes its animation before the next one begins.

Widget Settings

Animated Bar Graph Widget
Animated Bar Graph
Get The Widget