progress story chapter line presentation chapter navigation deck progress indicators narrative page rails long story pages need a visible sense of progress chapter state is unclear want a more editorial progress marker
Story Progress Line
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/story-progress-line.json Preview
Background
Customize
Quick Start
<div class="story-progress-line" style="--story-progress:42%"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 312 bytes · 12 lines
- Custom Properties
-
--story-progress--story-line-color--story-line-track - Classes
-
.story-progress-line
progress story chapter line presentation
Thin chapter-progress rail for narrative pages, deck sections, and long-form storytelling flows.