Horizontal Bar Graph
Data [1]
Data [2]
Data [3]
Data [4]
Data [5]
Data [6]
Animated Horizontal Bar Graph
This widget was requested by an EverWeb user who wanted to replicate the animated bar graph on the Apple website to show comparisons for the various versions of the iMac Pro.
The bar graph can be used for benchmark comparisons, user satisfaction etc and can compare up to six items using different color gradients.
A horizontal bar is much more useful when the item is part of a responsive page design. If viewing this on a computer, reduce the browser width to see how the bar graph responds.
Time Delay
The first example has a time delay of 4 seconds (4000 milliseconds) before the animation fires. This is to allow the parallax scrolling background images to load before the animation takes place.
The animation time is set at 3000 milliseconds.
Viewport Delay
The second example further down the page is set so that the animation doesn't take place until the item is scrolled into the viewport. The scroll distance can be varied and, in this case, is set to 100.
Delayed Action Bar Graph
Data [1]
Data [2]
Data [3]
Data [4]
Data [5]
Data [6]
Styles
The text for the optional heading and data can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
The container can be styled with padding, border width, border color and border radius.
The background color can be adjusted for opacity as can be seen in these example where it is set to .50
The height of the bars can be adjusted as well as their vertical spacing.
The first bar is obviously obligatory but the rest of them can be turned on as required by checking boxes.
Each bar can have a color gradient using up to three colors. The gradient starts at the left and, in this case, runs from darker to lighter.
The percentage width of each bar is easily adjusted using a slider.
The controls for setting the animation delay and time and the scroll distance are last in the widget settings since the bars will disappear as soon as they are set.