Progress Tracker

Encourage users to engage with your content and to continue to keep reading as they’ll know exactly how much is left. Full style customization is available for the Progress Indicator and Tracker Background.

Adding A Progress Tracker

From the widget panel drag a progress widget to your page or Single Post template to the desired location. You may also use positioning and sticky effects from the Advanced Tab.

---

Content Controls

1. Tracker Type: From the dropdown menu select between Horizontal, or Circular
2. Progress Relative To: Select between Entire Page, Post Content, or Selector from the dropdown menu
   1. If selector is chosen, provide the #id or .class you wish to track the progress of in the field
3. Direction: Select the appropriate alignment icon
4. Percentage: Use the toggle to choose to hide/show the percentage text of the progress

Style Controls

Tracker

1. Size: Use the slider control or manually enter the value desired

Progress Indicator

1. Color: Use the color picker to set the progress indicator color
2. Width: Use the slider control or manually enter the width for the progress indicator (PX)
3. Alignment: Use the appropriate icon to set the alignment of the progress indicator

Tracker Background

1. Color: Use the color picker to set the tracker background color
2. Width: Use the slider control or manually enter the width for the tracker background (PX)

Content

Percentage

1. Color: Use the color picker to set the percentage text color
2. Typography: Use the typography settings for family, size, weight, and decoration values
3. Text Shadow: apply a text shadow to the percentage using the controls

---