Progress Bar

Adding a Progress Bar

  • Hover over the desired section, and click the Add Element:

  • Choose the Progress Bar element from the modal that appears:

Editing a Progress Bar

  • Hover over your Progress Bar to display the Edit button in its top-right corner, then click Edit:

  • Modify the Progress Bar Settings: Progress, Style, Expired Part Color, Remaining Part Color.

Progress Settings

  • Drag to increase or decrease the progress count:

Please Note: Progress Bar is not dynamic. Open element's Settings to set or edit the progress value.

Style Settings

Select the progress bar preferable design within one of the options: Angular, Angular with indicator, Circular.

Expired Part Color Settings

Select to choose the expired part color within one of the options:

  • Pick a color from the suggested palette and modify its opacity:
  • Enter the HEX color value (a six-digit code preceded by a # sign that defines a color used in a website. It could be easily found online or by a color-picking tool/app):

Remaining Part Color Settings

Set the remaining part color within one of the options:

  • Pick a color from the suggested palette and modify its opacity.
  • Enter the HEX color value (a six-digit code preceded by a # sign that defines a color used on a website. It can be easily found online or by a color-picking tool/app).

Customize Heading or Counter

  • Select text to display the Editing Menu.
  • Enter and customize your text: