A scroll linked progress highlight built with pure HTML and CSS that visually marks or accents sections of content as the user scrolls through them, giving a clear sense of reading or viewing progress without relying on JavaScript or external libraries.
Usage
This component is ideal for layouts where progress through content should be visible, such as documentation pages, step-by-step guides, long articles, onboarding flows, or feature walkthroughs where users benefit from knowing which section is currently active.
Implementation
The highlight effect is achieved using CSS scroll linked states, accent borders or background changes, and transition timing, allowing each section to change appearance as it becomes active in the viewport while keeping the structure lightweight and reusable.
HTML
<div class="scroll-progress">
<div class="scroll-progress__bar"></div>
</div>CSS
.scroll-progress {
width: 200px;
height: 10px;
border-radius: 999px;
background: #e5e7eb;
overflow: hidden;
}
.scroll-progress__bar {
height: 100%;
width: 60%;
background: linear-gradient(90deg, #6366f1, #22d3ee);
animation: progressGrow 800ms ease forwards;
}
@keyframes progressGrow {
from { width: 0; }
to { width: 60%; }
}
@media (prefers-color-scheme: dark) {
.scroll-progress {
background: #374151;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Visually tracks section progress
- Helps users orient within long content
- Uses color or style shifts for emphasis
- Designed for structured, multi-section layouts
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.