Description
Pieces Progress #06 to #07 share a similar design. To modify the color and value of each bar, you must select the parent div with the name Progress Circle or use the corresponding class as a guide, such as .ob-progress-bar-05. 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.
The basic but crucial
<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 Percentage
Before
Now
- Select the Progress Circle you want to modify
- Locates the element representing the Progress Circle within the editor or design panel.
- Search for the Attributes property
- Once the element is selected, go to the component's properties section, usually labeled Attributes.
- 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" />
The minimum and maximum values you can enter range from 1 to 100.
</aside>
Change color
Before
Now
- Select the Progress Circle you want to modify
- Locates the element representing the Progress Circle within the editor or design panel.
- Search for the Attributes property
- Once the element is selected, go to the component's properties section, usually labeled Attributes.
- Edit the color.
- Locate the data-color option inside Attributes.
- Click on this property and modify the value in the Value field.
- 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
- Select the Progress Bar you want to modify
- Locates the element representing the Progress Bar within the editor or design panel.