##  [Progress Bar](/hc/documentation/learn-dxpr-builder/drag-and-drop-elements/progress-bar) 

Keep your viewers informed about the progress of a product launch or milestone or creatively showcase your level of different skills visually with the DXPR Builder progress bar.

Follow the steps below to start using the Progress Bar element in your website:

1. Click on the **+** icon
2. Go to the **Content** tab
3. Select the **Progress bar** element
4. Fill in the message of the bar in the **Label** field
5. Set the progress in the **Progress** field. This will change the length of the progress bar.
6. Set the size for the bar from the **Bar height** setting
7. Select the color of the **Front** and **Back** of the bar
8. *Optionally,* you can add **Stripes** and **Animations** to the bars
9. Once you’ve selected your preferred settings, you can click on **Save Changes** and you're done!