What you will need:

Step 1: Progress Bar Element Settings

  • Hover your mouse over the progress bar element and click on the Gear icon on the orange border.
  • Edit the element and adjust the Settings as desired.
  • Top Margin - Add space on the top of your element.
  • Percent - Enter the text you want to appear inside the progress bar.
  • Font Family - Select the font.
  • BG Color - ┬áSet the color of the progress bar.

Advanced Style Settings

  • Percent Width - Choose what % you want the bar to show.
  • Sizes - Choose the size of the bar.
  • Text Shadow - Add shadow to the text in the bar.
  • Text Style - Select the style of the text (bold and/or italicized).
  • Alignment - Change the justification (left, center, right).
  • Offset Color - Configure of the look of the "empty" portion of the bar.
  • Shadow - Add shadow around the bar.
  • Corners - Adjust the amount of rounding on the corners of the bar.
  • Border - Select a border.

Advanced Animation

  • Timed Delay - fade in or fade in with scale.
  • Type - On page load or on page scroll for the delay that you have set.

If you have any questions about this, please contact our support team by clicking the support icon in the bottom right-hand corner of this page.

Did this answer your question?