Reading Progress Bar — Documentation

Reading Progress Bar renders a thin fixed bar at the top or bottom of the viewport that fills as the visitor scrolls down the page. Use it on long-form content — blog posts, documentation, case studies — to give readers a visual sense of how far through the article they are.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Reading Progress Bar. Only one instance is allowed per page — the inserter will not offer a second one.

The editor shows a static preview at 42% fill with a note that the bar is fixed to the viewport on the frontend. It does not scroll in the editor.

Position

Position — where the bar is fixed on the viewport:

Option	Placement
Top of viewport	Pinned to the very top edge of the browser window
Bottom of viewport	Pinned to the very bottom edge

Show track background — displays a track behind the fill. On by default. Turn it off and the unfilled area is transparent, leaving only the filled portion visible.

Z-index — the stacking order of the bar. Default 9999, range 1–99999. Raise it if the bar appears behind a sticky header — set it higher than the header's own z-index.

The block sidebar is split into two tabs. Settings is what the bar does; Styles is how it looks.

Tab	Section	Covers
Settings	Position	Placement, track toggle, z-index
Settings	Advanced	Visibility, Position, anchor, CSS class
Styles	Bar	The fill, the track, and the thickness

Styling

Part	Rows
Bar	Fill, Track, Height (per device)

Fill is the portion that grows as the visitor scrolls. It's a background control, so it takes a solid color or a gradient — a bar that shifts hue as the reader advances. Image and overlay are deliberately off; a few pixels of height has nowhere to show them. Default #7C3AED.
Track is the unfilled remainder, default #e5e7eb. The row appears only while Show track background is on — turn the track off and the row disappears with it.
Height runs 1–20 px and is per-device, so a 6 px bar on desktop can thin to 3 px on mobile.

The Bar has no Normal/Hover states. It's a decorative indicator with nothing to hover.

HTML output

// terminalhtml

<div
  class="axiom-blocks-reading-progress-bar axiom-blocks-reading-progress-bar--top"
  style="height: 4px; background: #e5e7eb; z-index: 9999;"
  role="progressbar"
  aria-label="Reading progress"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="0"
>
  <div
    class="axiom-blocks-reading-progress-bar__fill"
    style="background: #7C3AED; height: 100%; width: 0%;"
  ></div>
</div>

The fill width starts at 0% and is updated live by the frontend script on every scroll event, with aria-valuenow kept in sync. When Show track background is off, the wrapper's background is transparent. A gradient fill replaces the flat background value on the inner __fill element.

Per-device heights are emitted as a scoped media-query rule rather than inline, so the inline height above is always the desktop value.