Module 51 of 71
Divi Progress Bar that shows how far they have come.
A reading progress tracker that fills as visitors scroll. A slim bar along the top or a circle with a percentage, for the page or one section.
How to plan a website redesign
Planning a redesign feels big, but it does not have to be. Start with a content audit: list every page and mark what you will keep, merge or remove.
Talk to your visitors
A handful of short interviews tells you more than any report about what people need.
Sketch the structure
Build, test, launch
What is the Divi Progress Bar module?
Progress Bar is a Divi 5 module in Divi Supreme Pro that tracks scroll progress. As visitors read, a bar fills across the screen or a circle closes, so they always know how much is left.
Choose a horizontal or circular tracker, measure progress for the entire page or a single section by CSS selector, set the fill direction, show or hide the percentage, and set the size. Style the indicator and track colours, widths and height.
tracker types
progress sources
directions
custom code
Start from a Progress Bar recipe.
The recipes and the playground run on the front end. Use Preview, or open the page, to try them.
How to plan a website redesign
Planning a redesign feels big, but it does not have to be. Start with a content audit: list every page and mark what you will keep, merge or remove.
Talk to your visitors
A handful of short interviews tells you more than any report about what people need.
Sketch the structure
Build, test, launch
Scroll inside the article.
Try every Progress Bar setting.
The recipes and the playground run on the front end. Use Preview, or open the page, to try them.
How to plan a website redesign
Planning a redesign feels big, but it does not have to be. Start with a content audit: list every page and mark what you will keep, merge or remove.
Talk to your visitors
A handful of short interviews tells you more than any report about what people need.
Sketch the structure
Build, test, launch
Everything Progress Bar can do.
Bar or circle
A slim horizontal bar, or a circular indicator with the percentage inside.
Page or section
Measure the whole page, or one section by CSS selector.
Any direction
Fill left to right or right to left, clockwise or counterclockwise.
Percentage label
Show or hide the number, with its own typography.
Colours and size
Indicator and track colours, widths, height and circle size.
Light and fast
No libraries, just scroll position, with smooth updates.
Progress Bar documentation
Setup for Divi 5: tracker type, progress source, selector, direction, percentage and size.
Questions about Progress Bar.
Next module, A to Z
Random Image Module
Related modules
Post Reading Time Module
Show how long a post takes to read.
Table Of Contents Module
Auto-build a list of headings.
On Scroll Header Animation Module
Headings that animate with the scroll.
Keep readers all the way to the end.
Progress Bar comes with 70+ Divi 5 modules and 16 extensions in Divi Supreme Pro.