Reading Progress Bar

Why a progress bar is good motion

Motion on the web works best when it explains something: where content comes from, what belongs together, what changed. A reading progress bar is the smallest example. It answers one question, "how much is left?", without asking for attention.

That is the idea behind every Kinetic module. Each effect is a normal Beaver Builder setting, it loads its script only on pages that use it, and it does its work in one shared animation frame. When a visitor asks for reduced motion, the page simply shows its final state.

The bar you are watching is drawn with a transform, not a width. That keeps it on the compositor, so scrolling stays smooth even on a busy page, and there is no layout shift when it appears.

Put the module anywhere: in a Themer header for every post, in a singular layout, or inline next to an article like this one. Use the "Measure element" setting to track one part of the page instead of the whole document.

Colours, a gradient, the track colour and the height are all in the Style tab. The fixed bars sit at the very top or bottom of the screen and respect the WordPress admin bar.

Keep scrolling to the end of this article and the inline bar on the left fills up completely, while the top bar keeps going for the rest of the page.

Motion on the web works best when it explains something: where content comes from, what belongs together, what changed. A reading progress bar is the smallest example. It answers one question, "how much is left?", without asking for attention.

That is the idea behind every Kinetic module. Each effect is a normal Beaver Builder setting, it loads its script only on pages that use it, and it does its work in one shared animation frame. When a visitor asks for reduced motion, the page simply shows its final state.

The bar you are watching is drawn with a transform, not a width. That keeps it on the compositor, so scrolling stays smooth even on a busy page, and there is no layout shift when it appears.

Put the module anywhere: in a Themer header for every post, in a singular layout, or inline next to an article like this one. Use the "Measure element" setting to track one part of the page instead of the whole document.

Colours, a gradient, the track colour and the height are all in the Style tab. The fixed bars sit at the very top or bottom of the screen and respect the WordPress admin bar.

Keep scrolling to the end of this article and the inline bar on the left fills up completely, while the top bar keeps going for the rest of the page.