RSL Scroll Progress

Scroll Progress provides a visual indicator showing how far users have scrolled through your content. Perfect for long articles, documentation, and storytelling pages. The indicator updates in real-time as users scroll.

New to Scroll Progress?

Get up and running in 1 minute with our Quick Start Guide!

View Quick Start Guide

Scroll Progress Class
.scroll-progress — Fixed position indicator bar that fills based on scroll position

How It Works
• Calculates scroll percentage: (scrollTop / scrollHeight) × 100
• Updates bar width on scroll event
• Fixed position ensures always visible
• High z-index (1000) keeps it above content
• Zero dependencies - pure CSS + vanilla JS

Default Styling
• Position: Fixed top (top: 0, left: 0)
• Height: 4px
• Color: Green (#4caf50)
• Z-index: 1000
• Initial width: 0%

Accessibility Features
• Non-intrusive visual indicator
• Respects reduced-motion preferences (can be disabled)
• High contrast color (green on most backgrounds)
• Does not interfere with keyboard navigation
• Purely visual - no ARIA needed

Download RSL Example Pack

Basic Implementation

The scroll progress bar at the top of this page shows your reading progress. Scroll down to watch it fill!

In Context: Long-Form Content

Scroll progress is particularly useful for articles, blog posts, and documentation where readers want to know how much content remains.

The Complete Guide to Responsive Design

15 min read • By Jane Developer

Responsive web design has become essential in modern web development. With users accessing websites from an ever-expanding array of devices—from smartphones to tablets to desktop computers—creating layouts that adapt seamlessly is no longer optional.

What is Responsive Design?

Responsive design is an approach to web development that ensures your content looks great and functions well on any screen size. Rather than creating separate versions of your site for different devices, responsive design uses flexible grids, layouts, and media queries to automatically adjust.

Key Principles

Fluid Grids: Use relative units like percentages instead of fixed pixels
Flexible Images: Ensure images scale within their containers
Media Queries: Apply different styles based on screen characteristics
Mobile-First: Start with mobile layout, then enhance for larger screens

Pro Tip: The scroll progress bar at the top of this page helps readers track their progress through this article. Notice how it fills as you scroll down?

Customization Options

Customize the scroll progress bar to match your brand using simple CSS overrides.

Color Variations

Blue: background-color: #2196f3;
Purple: background-color: #9c27b0;
Orange: background-color: #ff9800;
Gradient: background: linear-gradient(...);

Positioning Options

Top: top: 0; bottom: auto; (default)
Bottom: bottom: 0; top: auto;
Left (vertical): left: 0; width: 4px;
Right (vertical): right: 0; width: 4px;


/* Blue gradient bar at bottom, thicker */
.scroll-progress {
    bottom: 0;
    top: auto;
    height: 6px;
    background: linear-gradient(90deg, #2196f3 0%, #21cbf3 100%);
}

/* Vertical bar on left side */
.scroll-progress {
    top: 0;
    left: 0;
    width: 5px;
    height: 0; /* JS will update this instead of width */
    background-color: #9c27b0;
}

Realistic Use Cases

Blog Articles

Show readers how much of your article they've read, encouraging them to finish.

Documentation

Help users navigate long technical docs by showing progress through sections.

Landing Pages

Add subtle engagement tracking for storytelling or long-form sales pages.

Accessibility & Performance Notes

✓ Built-in Features

Lightweight: Minimal CSS and vanilla JavaScript (no dependencies)
Non-intrusive: Purely visual, doesn't interfere with content or navigation
Performant: Uses requestAnimationFrame for smooth updates (browser optimized)
No ARIA needed: Visual-only indicator, not meant for screen reader announcements

Respecting User Preferences

Consider disabling or reducing scroll progress animation for users who prefer reduced motion:


@media (prefers-reduced-motion: reduce) {
    .scroll-progress {
        display: none; /* Hide for users who prefer reduced motion */
    }
}

Keep Scrolling!

Notice the progress bar at the top of the page filling as you scroll through this content.

Halfway There!

The scroll progress bar should be around 50% filled by now.

Integration with RSL

Scroll progress works seamlessly with all RSL components and layouts. It doesn't interfere with sticky navigation, modals, or off-canvas drawers thanks to proper z-index management.

Compatible Components

✓ Sticky Navbar
✓ Fixed Headers
✓ Modals & Dialogs
✓ Off-Canvas Drawers
✓ Popovers & Tooltips

Works With

✓ Density Modes
✓ Grid Layouts
✓ Responsive Images
✓ Forms & Validation
✓ All Helper Classes

Almost there...

You Made It!

The scroll progress bar should be at 100%. Great job exploring RSL Scroll Progress!

Read the Full Documentation

Scroll Progress Examples