Top Progress Bar

Live Progress Bar (Top Position)

% complete

This is demo content to show reading progress. Scroll within this area to see the progress bar update in real-time.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

<div x-data="sparklesReadingProgress({ displayMode: 'bar', position: 'top' })"
     x-init="init()"
     class="reading-progress reading-progress--bar reading-progress--top">
    <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 Indicator

Scroll here to see circular progress update.

More content to demonstrate the circular reading progress indicator functionality.

This area has scrollable content that will update the circular progress.

Additional text to provide more scrollable content for demonstration purposes.

Percentage Display

%

Reading Progress

Scroll to see percentage update.

Content for percentage display demo.

Advanced Features

Jump to Progress

Click to jump to different reading positions:

Current:

Auto-Hide Progress

Progress bar shows/hides automatically based on scroll position.

Status:

Start scrolling to show progress.

Progress appears after threshold.

Auto-hides when at top.

Configuration Options

Available Configuration

Display Modes

bar - Horizontal progress bar
circle - Circular progress indicator
percentage - Percentage display

Positions

top - Top of viewport
bottom - Bottom of viewport
sidebar - Side positioning

Behaviors

autoHide - Show/hide automatically
animated - Smooth transitions
threshold - Activation point

Implementation Guide

Basic Usage

<!-- Include the Sparkles Reading Progress JS -->
<script src="/sparkles-design-library/alpine-components/sparkles-reading-progress.js"></script>

<!-- Basic Progress Bar -->
<div x-data="sparklesReadingProgress()" x-init="init()">
    <div class="progress-bar" :style="`width: ${progress}%`"></div>
</div>

<!-- With Configuration -->
<div x-data="sparklesReadingProgress({
    displayMode: 'circle',
    position: 'sidebar',
    autoHide: true,
    threshold: 100
})" x-init="init()">
    <!-- Your progress indicator markup -->
</div>

💡 Pro Tips

• Use contentSelector to target specific content areas
• Set threshold to control when progress becomes visible
• Enable smoothing for ultra-smooth progress updates
• Use jumpToProgress() method for table of contents navigation

Usage Examples

// Basic Reading Progress Bar

<div x-data="sparklesReadingProgress({ 
    displayMode: 'bar',
    position: 'top',
    contentSelector: '.content',
    threshold: 0,
    autoHide: false
})" x-init="init()">
    <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

<div x-data="sparklesReadingProgress({ displayMode: 'circle' })" 
     x-init="init()">
    <svg class="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="45" stroke="currentColor" 
                stroke-width="8" fill="transparent" class="text-gray-200"/>
        <circle cx="50" cy="50" r="45" stroke="currentColor" 
                stroke-width="8" fill="transparent" 
                class="text-blue-600" :style="getProgressBarStyles()"/>
    </svg>
</div>

// Auto-Hide Progress with Threshold

<div x-data="sparklesReadingProgress({ 
    autoHide: true, 
    threshold: 50,
    contentSelector: '.article-content'
})" x-init="init()">
    <div x-show="isVisible" 
         x-transition
         class="sparkles-progress-bar">
        <div :style="`width: ${progress}%`"></div>
    </div>
</div>