Getting Started

You can add a progress bar to your website using the Progress Bar element. This article will feature how you can add and edit a progress bar on your website and follow all the instructions accordingly.

Adding a Progress Bar

Follow the steps below to add a Progress Bar to your site.

- Click on the (+) button labeled Add Element or Container within an empty container
- From the Elements tab, select Progress Bar


Refer to the GIF below:

Editing the Progress Bar element

Follow the steps and instructions below to add and edit a Progress Bar on your site.

The Progress Bar element editor has the following options:

Progress Bar Items
Progressbar Style
Label Style
Tooltip Style
Animation Style
Background

The Progress Bar element editor:

Progress Bar Items

You can edit, copy or delete progress bars from the Progress Bar element from this option.

Refer to the GIF and Image below to see the demonstration:

Progress Bar Style

From this option, you will be able to stylize your progress bar. With settings like setting the height, the gap between each progress bar, and more.

Refer to the GIF below to see all these settings being demonstrated:

Label Style

From the Label style option, you will be able to change the colors of the label, change its position, and more.

Refer to the GIF below to see all these settings being demonstrated:

Tooltip Style

From this option, you will be able to customize the tooltip of your progress bar.

Refer to the Image and the GIF below to see all these settings being demonstrated:

Animation Style

You can add animation to your progress bar with this option.

Refer to the GIF below to see all these settings being demonstrated:

Background

You can add a background to your progress bar in the form of plain color or gradient.

Refer to the GIF below to see these settings being demonstrated:

Updated on: 13/05/2024