> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Progress Bar

# 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:**


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-09-at-51_1nnznk4.gif)


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_181zu4j.png)

![Progress Bar after it is added](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_18et0v0.png)


# 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:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1sn552s.png)

# 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:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_tq5uxs.png)

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at10720p_15ycxpy.gif)

# 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:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at11232p_1ty4nmf.gif)

# 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:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at11645p_1nu2im5.gif)

# 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:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_v6b828.png)

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at11905p_3mm4m.gif)

# 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:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at12051p_82lhix.gif)

# 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:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at12204p_hbf0dc.gif)