(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Reading Progress Bar / Circle For Full Page or Specific Post / Section – Elementor Tutorial
In this tutorial, we will be making progress bar or progress circle that shows how much page has been read. You can choose to have progress bar for full page or specific section like blog article. The radial progress bar can be used for full page or specific section.
The Progress Bar is a pro widget available in Elementor Pro. So, if you purchase Elementor Pro, you don’t have to make it from scratch.
0%
Version 1 – Reading Progress Bar for Full Page
- dm-reading-progress-1 is the CSS class of the spacer widget (or div if you’re coding from scratch).
- This progress bar shows progress of whole page.
Version 2 – Reading Progress Bar for specific section (Example: blog)
- dm-reading-progress-2 is the CSS class of the spacer widget (or div if you’re coding from scratch).
- dm-sticky-wrapper-2 dm-sticky-element is the CSS class of the container that contains spacer widget (or div if you’re coding from scratch).
- dm-progress-area is the CSS class of the container that should be used to show progress for. (example: blog)
Version 3 – Circle Reading Progress Bar with Counter (use with version 1 or version 2)
- dm-reading-progress-circle is the CSS class of the container that should have the progress circle. Optional:I have given it’s width to be min(200px, 30%);.
- dm-reading-progress-number is the CSS class of the heading widget that should show progress counter.
- Add the 2nd code in appropriate location in version 1 or version 2 code above. (Please refer video to understand it better)
//ProgressCircle Animation
const dmProgressNumber = document.querySelector('.dm-reading-progress-number .elementor-heading-title');
dmProgressNumber.textContent = `${Math.floor(scrollPercentage)}%`;
dmProgressCircle.animate(scrollPercentage / 100);
Extra – Dynamic Position Fixed Code (Watch above video for better understanding)
- Sometimes, you might not want to have position fixed by default and only would want it to stick to top of the page when you have scrolled till the progress bar. This works differently than position sticky as with position sticky, the progress bar would not go outside it’s parent container. But using dynamic approach to add position fixed allows the sticky effect to work outside the parent container.
- dm-fixed is the CSS class that we add to our dm-sticky-element div when it reaches on top of view.
- dm-sticky-element is the CSS class of element that needs to be sticky.
- dm-sticky-wrapper is the parent container of our element, dm-sticky-wrapper acts a checkpoint or marker to add/remove dm-fixed CSS class. Make sure to make it have no size (gap 0, padding 0, height 0), so that it does not take any place and just acts as a marker.
Note: This code needs to be used with version 1 code above.