Description

Pieces Progress #01 to #05 share a similar design. To modify the color and value of each bar, you must select the parent div with the name Progress Bar or use the corresponding class as a guide, such as .ob-progress-bar-03 or .ob-progress-bar-04 for Progress #04. Then, in the Attributes section, you can adjust the necessary values, such as the color of the bar and the percentage that represents the progress.

Change Percentage

Before

Now

1. Select the Progress Bar you want to modify
   • Locates the element representing the Progress Bar within the editor or design panel.
2. Search for the Attributes property
   • Once the element is selected, go to the component's properties section, usually labeled Attributes.
3. Edit the percentage.
   • Under Attributes, locate the data-percentage option.
   • Click on this option and modify the value in the Value field.

<aside> <img src="/icons/report_gray.svg" alt="/icons/report_gray.svg" width="40px" />

By default, the min and max values you can enter range from 1 to 100, but these limits can be changed as needed. To learn more, see Change min and max values.

</aside>

Change color

Before

Now

1. Select the Progress Bar you want to modify
   • Locates the element representing the Progress Bar within the editor or design panel.
2. Search for the Attributes property
   • Once the element is selected, go to the component's properties section, usually labeled Attributes.
3. Edit the color.
   • Locate the data-color option inside Attributes.
   • Click on this property and modify the value in the Value field.
4. Define the color.
   • You can use values in Hexadecimal format (for example, #FF5733) or use color variables defined in your project (such as var(--primary).

Change suffix

Before

Now

1. Select the Progress Bar you want to modify
   • Locates the element representing the Progress Bar within the editor or design panel.
2. Search for the Attributes property
   • Once the element is selected, go to the component's properties section, usually labeled Attributes.
3. Edit the suffix.
   • Locate the data-suffix option inside Attributes.
   • Click on this property and modify the value in the Value field.