The Progress Tracker widget allows for full-style customization of both the Progress Indicator and Tracker Background, providing an easy way to display progress on your website.
Adding Progress Tracker widget
Add the Progress Tracker widget by finding it on the widgets panel and dragging it to the page canvas. For details, see Add Elements article.
Content tab
- Tracker Type: Select either Horizontal or Circular from the dropdown menu.
- Progress Relative To: Choose Entire Page, Post Content, or Selector. If you select "Selector," provide the CSS #id or .class you wish to track.
- Direction: Choose to align left or right.
- Percentage: Toggle to show or hide the percentage text of the progress.
- Percentage Position: Select the appropriate icon for left or right alignment (available only for Horizontal tracker type).
Style tab
Tracker
Note:
The below settings are available for Circular tracker type only.
- Size: Adjust the size using the slider control or enter the desired value manually.
Progress indicator
- Color: Set the color using the color picker.
- Width: Adjust the width using the slider control or enter it manually in pixels (PX).
- Alignment: Set the alignment using the appropriate icon.
Tracker background
- Color: Set the background color using the color picker.
- Width: Adjust the width using the slider control or enter it manually in pixels (PX).
Note:
The below settings are available for Horizontal tracker type only.
Progress indicator
- Progress Color: Set the color using the color picker.
- Border Type and Radius: Customize the border type and radius. For details see Border Type and Border Radius.
Tracker background
- Background Color: Set the background color using the color picker.
- Height: Adjust the height using the slider control or enter it manually in pixels (PX).
- Border Type and Radius: Customize the border type and radius. For details see Border Type and Border Radius.
- Box Shadow: Customize the box shadow. For details see Understanding and Using Shadows in 10Web Builder.
Content
Percentage
- Color: Set the text color using the color picker.
- Typography: Customize the font family, size, weight, and decoration.
- Text Shadow: Apply a text shadow to the percentage using the available controls.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.