Reading Progress Bar

Reading Progress Bar

A thin bar that fills as visitors scroll, showing how far they are through the page. Ideal for blog posts, docs, case studies and long landing pages.

Customizable Properties

Everything is set from the property panel, with no code editing.

- Fill: color of the progress bar

- Track: color of the background behind the bar

- Grow From: left, center or right

- Rounded: round the leading end of the bar

- Smooth: spring-smoothed motion or direct tracking

How To Use

Drop the component on your page and set its position to Fixed. Set Width to Relative 100% and Height to 4px, pin it to the top and left at 0, and raise its Z Index so it stays above your sections.

About The Code

This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited.

More Resources

Pair it with Scroll To Top Progress Button, a back-to-top button with a matching progress ring. More components: https://joviseo.vercel.app