Reading Progress

Visual reference for reading progress indicators. For live scroll-driven behavior on blog posts, use the blogReadingProgress Alpine component from CustomHyva_HyvaBlog.

Top Progress Bar

Progress Bar Pattern (Top Position, 65% static)

% complete 
<!-- Live usage on blog post pages -->
<div x-data="blogReadingProgress"
     class="sticky top-4 z-10 w-full">
    <div class="w-full bg-gray-200 rounded-full h-2">
        <div class="bg-blue-600 h-2 rounded-full" :style="`width: ${progress}%`"></div>
    </div>
</div>

Circular Progress Indicator

Circle Progress Pattern (45% static)

Percentage Display (82% static)

%
Reading Progress

Advanced Features

Jump-to-Progress UI Reference

Visual reference only. Wire buttons up to window.scrollTo() in your own template.

Auto-Hide Progress Pattern

In production, isVisible toggles based on scroll threshold. Shown here in visible state.
Status:

Implementation Guide

Production Usage (Blog Posts)

<!-- Registered by CustomHyva_HyvaBlog post-view.js -->
<div x-data="blogReadingProgress" class="sticky top-0 h-1 bg-gray-200">
    <div class="h-full bg-blue-600 transition-all"
         :style="`width: ${progress}%`"></div>
</div>

Notes

  • - blogReadingProgress tracks full-window scroll against document height.
  • - Needs meaningful scrollable content; inner overflow-y-auto panels are not supported.
  • - For non-blog contexts, register your own Alpine factory using the same pattern.

Performance & Accessibility

Performance Features

  • - Scroll events debounced via requestAnimationFrame ticking flag
  • - Passive scroll listener avoids blocking touch/wheel events
  • - Initial sync deferred via SparklesDefer when above the fold

Accessibility Support

  • - Progress indicators expose ARIA progressbar role with live values
  • - Transitions respect user motion preferences via Tailwind utilities
  • - High-contrast mode compatible with themeable color classes