Progress Bar

Adding Progress Bar

The Progress Bar can be placed into different blocks of a page via Drag & Drop.

• Click Build on the left sidebar of Site Editor:

• Under the Features section, click Content
• Find the Progress:

• Drag & Drop the feature onto one of the available placeholders highlighted in red when you drag the feature over them:

Edit Progress

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

You can modify Progress Bar Settings:

Progress

• Drag to increase or decrease progress count:

Please Note: Progress Bar is not dynamic. To set or edit the progress value, customers need to open feature Settings.

Style

Select the progress bar preferable design within one of the options:

• Angular
• Angular with indicator
• Circular

Expired Part Color

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

Pick a colour from the suggested palette and modify its opacity.

Enter the HEX colour value (a six-digit code preceded by a # sign, that defines a colour that is used in a website. It could be easily found online, or by a colour picking tool/app).

Remaining Part Colour: 

Allows to set the remaining part colour within one of the options:

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

Customise Heading or Counter

• Select a text to display the Editing Menu:

Enter and customise your text: