Progress Tracker

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

Tracker Type: From the dropdown menu select between Horizontal, or CircularProgress Relative To: Select between Entire Page, Post Content, or Selector from the dropdown menuIf selector is chosen, provide the #id or .class you wish to track the progress of in the fieldDirection: Select the appropriate alignment iconPercentage: Use the toggle to choose to hide/show the percentage text of the progress

Style Controls

Tracker

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

Progress Indicator

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

Tracker Background

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

Content

Percentage

Color: Use the color picker to set the percentage text colorTypography: Use the typography settings for family, size, weight, and decoration valuesText Shadow: apply a text shadow to the percentage using the controls