Progress Tracker
Visual progress indicators guide users through their journey on a page, enhancing interactivity and user engagement. The Progress Tracker Widget in JupiterX allows you to effortlessly implement such functionality.
Content Tab
Progress Tracker
Tailor the progress tracker to fit your website’s layout and user journey:
- Tracker Type: Decide whether your progress indicator should take a Horizontal bar shape or a more stylistic Circular form.
- Progress relative to: Define the scope of what the tracker measures—whether it's the entirety of the page, just the Post Content , or a particular element you wish to focus on.
- Selector: When opting to track a specific element, enter the CSS selector (either an ID or class) for precision. This instructs the tracker to measure scrolling progress based solely on this element.
- Direction: The progress can be visualized in different directions—left to right for horizontal trackers, clockwise for circular—which affects how users perceive their advancement.
- Percentage: Choose whether to numerically display the progress percentage, providing a quantifiable perspective of the user's journey.
Style Tab
Tracker
- Progress Indicator
- Progress Color: Set the color of the progress bar or circle to make it stand out or align with your design.
- Border Type: Frame the progress indicator by choosing a border style. Options include solid, dotted, or perhaps a borderless design.
- Border Radius: If your tracker is a bar, you can round the corners by adjusting the border radius for a softer appearance.
Tracker Background
- Background Color: Select a subtle or contrasting color for the background upon which the progress indicator will move.
- Height: Define the tracker bar's vertical thickness for visibility without being obtrusive.
- Border Type: You can also set a distinct border for the background, differentiating it from the progress indicator.
- Border Radius: Rounded corners can be applied to the tracker background for a consistent look with the progress indicator.
- Box Shadow: Apply a box shadow for dimensionality, making the tracker pop out from the rest of the page content.
- Padding: Padding inside the tracker ensures ample space around the progress indicator, enhancing its prominence.