Reading Progress Bar

The Reading Progress Bar element pins a thin bar to the top or bottom of the browser window and fills it as the visitor scrolls. It tells someone in the middle of a long article how much of it is left, without taking any space in the layout.

Adding the element

Add an element in the YOOtheme Pro builder and pick Reading Progress Bar from the Planckie Elements group. The bar has no content of its own, so there is nothing to fill in: it works as soon as it is on the page.

Where you drop it does not matter. On the live page the element moves itself to the end of the document, because a section with a parallax or an animation would otherwise become the anchor of the fixed bar and drag it along the page. In the builder it stays where you placed it so that it remains selectable.

One bar per page is the usual setup, but several work: each one tracks the same scroll position.

Settings

Bar

Option	Description
Screen Edge	Top or Bottom of the browser window. Top by default.
Height	Small, Default or Large — 2, 4 or 8 pixels.
Color	Primary, Secondary, Success, Warning, Danger — taken from the active theme style — or Custom. Primary by default.
Custom Color	A color picker, shown once Color is set to Custom. A value that is not a color falls back to the primary color of the style.
Border Radius	None, Rounded or Pill. Only the leading end is rounded; the other end sits flush against the edge of the window.
Z Index	0 to 9999, 999 by default. Raise it to cross a sticky navbar, lower it to slide underneath one.
Opacity	0 to 100 percent.

A theme color follows the active style, so the bar changes with the style instead of freezing today's hex value. Pick Custom only for a color the style does not have.

Transition

Option	Description
Transition	Smooth transition eases the bar towards the scroll position instead of following it frame by frame. On by default.
Duration	50 to 500 milliseconds, 100 by default. Active while the transition is on.

The easing is a CSS transition on the width of the fill, so it costs nothing and stops entirely for visitors who prefer reduced motion.

General and Advanced

The General group holds Visibility, which is the setting to reach for when the bar should only appear on larger screens. It and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.

Styling

The element exposes these classes to Custom CSS, alongside .el-element:

.pe-reading-progress-bar, .pe-reading-progress-bar-fill

.pe-reading-progress-bar is the fixed strip across the window and .pe-reading-progress-bar-fill the part that grows. One CSS custom property has no field:

Property	Effect
--pe-reading-progress-bar-height	The thickness of the bar, when none of the three heights is the one you want.

Set it on .pe-reading-progress-bar. Custom CSS keeps working after the element moves to the end of the document, because YOOtheme scopes the rules to the element itself rather than to its place in the layout.

Accessibility and reduced motion

The bar is a progressbar named Reading progress — the role already says that it is a bar — and it reports whole percentages as the page scrolls, so a screen reader user can ask where they are. It takes no focus and no clicks: it is an indicator, not a control, and pointer events pass straight through it to whatever is underneath.

With reduced motion enabled in the visitor's system settings, the fill jumps to each new position instead of easing towards it. Everything else stays as it is, since the bar only moves because the page does.

Notes and limits

• Progress is measured against the whole document, not against one article. On a page where the content ends well above the footer, the bar reaches a hundred percent at the bottom of the page rather than at the end of the text.
• The element is pinned to the browser window, so it ignores the margins, alignment and width settings of the layout. Screen Edge and Z Index are what position it.
• The bar recalculates when the scrollable height changes, so images, fonts and lazily loaded content that arrive late do not leave it reporting a stale value.
• Without JavaScript the bar renders at zero and never fills. It stays invisible rather than wrong.
• A page that fits the window without scrolling has no progress to report, and the bar stays empty.