Scroll Progress
Scroll Progress
The ScrollProgress component displays a progress bar indicating scroll position. It's perfect for creating engaging scroll indicators that help users track their progress through content.
Usage
<template>
<MScrollProgress class="bg-primary fixed top-0 z-50" />
<div class="space-y-4 p-4">
<div v-for="i in 20" :key="i" class="h-32 bg-secondary rounded"></div>
</div>
</template>
Props
Examples
Basic Scroll Progress
Scroll Progress Indicator
Track your reading progress with this visual indicator that updates as you scroll
Introduction
The scroll progress indicator is a subtle yet effective way to show users how much of a page they've read and how much remains. This can be particularly useful for long articles, documentation, or any content where users need to track their progress.
Benefits
- Improves user experience by providing visual feedback
- Helps users track their progress through long content
- Encourages completion of articles or forms
- Subtle animation that doesn't distract from content
- Works seamlessly across all device sizes
Implementation
The scroll progress indicator is easy to implement and customize:
<MScrollProgress class="bg-primary fixed top-0 z-50" />
Advanced Features
Customize the appearance and behavior to match your design system:
Colors
Match your brand colors
Height
Adjust thickness
Position
Top or bottom
Conclusion
Adding a scroll progress indicator to your website or application is a simple way to enhance the user experience. It provides valuable feedback and helps users navigate through your content more effectively. Try implementing it today to see the difference!
<template>
<MScrollProgress class="bg-primary fixed top-0 z-50" />
<div class="space-y-4 p-4">
<div v-for="i in 10" :key="i" class="h-32 bg-secondary rounded"></div>
</div>
</template>
With Gradient Styling
<template>
<MScrollProgress class="bg-gradient-to-r from-purple-500 to-indigo-600" />
<div class="space-y-4 p-4">
<div v-for="i in 10" :key="i" class="h-32 bg-tertiary rounded"></div>
</div>
</template>
With Custom Spring Options
<template>
<MScrollProgress :spring-options="{ stiffness: 100, damping: 30 }" class="bg-gradient-to-r from-emerald-500 to-teal-600" />
<div class="space-y-4 p-4">
<div v-for="i in 10" :key="i" class="h-32 bg-primary rounded"></div>
</div>
</template>