The Progress Bar element displays a progress bar. You can control its display, typography, and animation settings.
Add a Progress Bar element to your page from Add+ -> Helpers -> Progress Bar.
Progress Amount
To change the progress bar percentage, simply slide the circle along the sliding bar under Progress.
Progress Bar
- Bar Color - sets the color of the progress bar covered by the Progress percentage.
- Background Color - sets the color not covered by the Progress percentage.
- Bar Padding - sets the padding on all sides within the progress bar.
- Stripes - set this to true to display diagonal stripes within the Progress Bar element.
Animation
The Progress Bar animation settings can be controlled in this section. By default, all animation settings are set to false. The following parameters can be modified to animate the progress bar and its stripes, if displayed:
- Animation Stripes - To animate stripes, set this to true.
- Animation Width - To animate the growth of the progress bar up to the set percentage, set this to true.
- Animation Stripes Duration - This parameter determines how long it takes for two stripes to move across the progress bar, in seconds.
- Animation Width Duration - This parameter determines how long it takes the progress bar to reach the set percentage, in seconds.
Typography
In this tab you can control the typography for two sets of text within the Progress Bar element: Left Text and Right Text.
Each set has identical typography settings, which are the same as those found at Advanced > Typography.
