Elementor Reading Progress Tracker (Add a Circular or Horizontal Progress Tracker with EPro

In this tutorial, I’ll show you how to add an elementor reading progress tracker to your Elementor website. The progress tracker can be assigned to track the progress of an entire page, an element, or a section using custom selectors. 

To be able to do this, you need Elementor Pro as the progress tracker widget only comes in the pro version.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Elementor Reading Progress Tracker Tutorial

If you have your Elementor Pro ready, go to Templates > Theme Builder, (01:07)

9i6p FbZJUkq4F4V0aB3eQIfJczaxNejrwSbZZ04A SMUGdfngBotQB0D9fEJw1tXG837pYKJQTkF Cu83ifyPuGmESlHoj0BtYmIQELR0cD35ym22cgp qqDaKSw8yIORsgnXsD

I’m going to use two blog post layouts on my own website; one with a sidebar and another without, to show you how to add your progress tracker.

To Read: How to Create a Single Elementor Blog Post Page Template

Add a Circular Progress Tracker in Elementor with Custom Selector

I’ll start off by opening up the first blog post page with Elementor and duplicating the title in the sidebar (01:39). 

In the Edit Heading area on the right, give the new heading a title (Your Read). Under Alignment, select center.

8507H1TKfBRF7aVl7Z8bbhvhMEsWjIQDhRcLg49l7lUJr9lgE24WXUHohWY2Gnm5ERNMfMzR0EjnU

Go to the Widgets area and look for the Progress Tracker widget (01:58), drag it to the sidebar.

7PXK76QezgwG05fWgUEYB0xT CwBBWNZbmRrWKjWncQl5iC hrY1sub53jVJx5gjfh4zZTAZbFue Z4GA878SCkgZAh1cqh6awOlEuckSJ9O6FM1lGXyE7DrbhIz6gU1WAr9Z2WH

In the Edit Progress Tracker area, change Tracker Type to circular, and set the Progress relative to; selector. The selector will track the progress of a specific element on the page; in this case the progress of the blog post widget.

Select that particular post widget and go to Advanced, under CSS Classes add ‘post-progress’ (02:22)

K 5R6UNJN5Lf6Xd5ZaSzUjmKVOgP2pk8Heh9efYhcyBaGPglIfLzXbubyG85 XbJfmm9Oq4Yg9QYvbGuqQwGFqs54APxY0Q vDEGzltp4KBTRwMqHqjhc2sqPYAVIliLdYhCFwsr

Tip: the CSS Class should be added WITHOUT a dot (.) and WITHOUT spacing.

Select the post tracker widget, go to Content > Selector, add ‘.post-progress’ (this time with the dot).

On the Direction option, select right, and then enable the Percentage option; to show the percentage when someone is scrolling (02:43)

x0T5i0jhKT ayW ViasXJU6P GNyvEV0ebwk8wxjlHpkCFfU9b0Oh8 L G 8Sv2QS7IgwsEdVgJP9bPGJVgBVH4eGEGj6K7TTTy6A2nnF4mBE KauD8H0eVb4v bPbrBWAtdwj7I

Go to Style, set Size to 122, set the Color to yellow, set Width to 12, and the Background Color to red.

Under Content, set Color to blue, under Typography set the font to Montserrat, Size to 19 pixels, and Weight to 900.

Back to the Tracker option, go to Tracker Background and change Width to 10 (03:36)

lPS8Wu9XNWidetaBrpjlQg4g2aRynfSWKdjBbBNeVJCOcg5DLanLcvecBNZkRTQOmSX7 MTzXAM
Circular elementor reading progress tracker

To Read: How To Submit Posts from Frontend in WordPress for Free

Add a Horizontal Progress Tracker in Elementor

Opening the second blog post layout in Elementor: 

Drag the post tracker widget to the section (04:08).

Dmlc3F7kxhrtLTmNzjQS3SePBHR2GN35ZUw09i53ePXn8N1dh2qk2DJTsdAuirO3SmBfVVuI8a1ihkIHwkNtmENpEUQ2wL0j10zmtYCVx0Wa6ap7Iqy

In the Edit Progress Tracker area, under Content set the Tracker Type to Horizontal, Progress relative to; Post Content, Direction; left, and make sure the Percentage option is disabled.

Under Style, set the Progress color to yellow, Tracker background color to red, Height to 10 pixels. 

Under Padding, unlink the values then add 10 pixels on the right.

To make the horizontal progress tracker sticky:

Select it and go to Advanced > Motion Effects, under Sticky, select Top. On the Sticky on option, make sure all devices (desktop, tablet, and mobile) are included. 

Now when you scroll, the progress tracker should be showing, and when you scroll to the end of the blog post, it leaves the 10 pixels space that was added via padding.

elementor reading progress tracker gif
Elementor reading progress tracker – horizontal

Elementor Progress Tracker Responsive Settings

Select your progress tracker and go to the Responsive Mode (05:34), select the tablet and mobile devices, and make sure the progress tracker is functioning and it should be.

6hZM3cUQXP2b4k DkMFEcexlBq300amTnAXROeHd7j1m8cJNYfDOJLt zxkp9VTuzgLX5kzkg29ANZ9H5GplEOompWtn8f2xVNULl tF8HVWq 1Pi h44

Also Read: Create an Elementor Posts Loop with Custom Column Link

In conclusion

That’s how you can add a circular or horizontal progress tracker on your website/blog post using Elementor Pro.

If you have any questions or comments about this tutorial, let me know in the section below. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users