OsirionReadingProgress

OsirionReadingProgress shows a thin bar at the top of the window that fills from left to right as the reader scrolls through the page. Use it on long articles. It is a CSS scroll-driven animation, so it needs no script.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub. Available from 4.0.

@using Osirion.Blazor.Components

<OsirionReadingProgress />

<p class="mb-0">The bar is at the top of this window. Scroll the page and it fills from left to right.</p>

Usage

Place it once on the page, anywhere in the markup:

@using Osirion.Blazor.Components

<OsirionReadingProgress />

To change its color and thickness, set its two custom properties in your stylesheet:

:root {
    --osirion-reading-progress-color: #16a34a;
    --osirion-reading-progress-height: 4px;
}

Parameters

The component has no parameters of its own. It takes the ones every Osirion component inherits:

Unmatched attributes and Class go on the bar <div>. Style is accepted but the component does not write it.

Behavior

• The bar is position: fixed at the top of the viewport and its width follows the scroll position of the page's root scroller (animation-timeline: scroll(root block)). It does not follow a scrolling container inside the page.
• Browsers without scroll-driven animations do not show the bar at all, so it never sits empty or stuck. The CSS checks support with @supports (animation-timeline: scroll()).
• The bar is decorative: it has aria-hidden="true", because the scroll position is already available to assistive technology, and it ignores the pointer, so it never blocks a click on a sticky header beneath it.
• It does not check prefers-reduced-motion. The bar follows the scroll position rather than playing on its own, so it does not animate by itself.
• It renders the same in static SSR and in interactive render modes.

Styling

The bar sits at z-index: 1100. If a fixed header in your layout uses a higher value, pass a class (Class="article-progress") and raise the bar's z-index with a selector such as body .osirion-reading-progress.article-progress; the component's own styles are scoped (a class plus an attribute), so a single class selector is not specific enough to override them.

Related

• Article metadata
• Content components