Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more
docs PHP, CSS & JS

Progress Bar

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.


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.


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.

Last modified: June 12, 2020
Copyright © 2024 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram