Scroll Indicator
Thin progress bar that tracks scroll position of the page or a target container. Sticks to the top or bottom edge with accent or gradient fill.
<arc-scroll-indicator>Overview
ScrollIndicator renders a slim progress bar that fills left-to-right as the user scrolls through content. It attaches to the nearest scroll container or the window, updating via requestAnimationFrame-throttled scroll events, so rendering stays smooth.
The bar sticks to the top or bottom edge using position: sticky and stays out of the pointer-event flow so it never blocks clicks or text selection. Two color modes (solid accent, or a primary-to-secondary gradient) let you match the bar to your theme.
Three size presets (sm: 2px, md: 3px, lg: 4px) keep the indicator unobtrusive at the default small size while offering slightly bolder options for reading-focused layouts like blog posts or documentation. The component sets role="progressbar" with aria-valuenow for accessibility.
Guidelines
When to use
- Place at the top of long-form content like articles, docs, or settings pages
- Use the gradient color for branded reading experiences
- Use the sm size (default) for subtle progress indication
- Set a `target` selector when tracking a scrollable panel instead of the full page
When not to use
- Do not use scroll indicator on short pages where scrolling is minimal
- Do not stack multiple scroll indicators: one per scroll context is sufficient
- Do not use as a loading indicator; use `arc-progress` for async operations instead
Features
- Tracks scroll progress of the window or a specific CSS-selector target
- rAF-throttled scroll listener
- Sticky positioning at top or bottom edge
- Two color modes: solid accent and primary-to-secondary gradient
- Three size presets: sm (2px), md (3px), lg (4px)
- Accessible `role="progressbar"` with live `aria-valuenow`
- Non-interactive: `pointer-events: none` so it never blocks content
- Respects `prefers-reduced-motion` by disabling transitions
Preview
Scroll this container to see the indicator fill...
Usage
This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.
<!-- Page-level scroll indicator -->
<arc-scroll-indicator></arc-scroll-indicator>
<!-- Gradient bar tracking a specific container -->
<arc-scroll-indicator target="#my-panel" color="gradient" size="md"></arc-scroll-indicator>import { ScrollIndicator } from '@arclux/arc-ui-react';
{/* Page-level */}
<ScrollIndicator />
{/* Target a container */}
<ScrollIndicator target="#my-panel" color="gradient" size="md" /><script setup>
import { ScrollIndicator } from '@arclux/arc-ui-vue';
</script>
<template>
<ScrollIndicator />
<ScrollIndicator target="#my-panel" color="gradient" size="md" />
</template><script>
import { ScrollIndicator } from '@arclux/arc-ui-svelte';
</script>
<ScrollIndicator />
<ScrollIndicator target="#my-panel" color="gradient" size="md" />import { Component } from '@angular/core';
import { ScrollIndicator } from '@arclux/arc-ui-angular';
@Component({
imports: [ScrollIndicator],
template: `
<arc-scroll-indicator />
<arc-scroll-indicator target="#my-panel" color="gradient" size="md" />
`,
})
export class ArticlePage {}import { ScrollIndicator } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<>
<ScrollIndicator />
<ScrollIndicator target="#my-panel" color="gradient" size="md" />
</>
);
}import { ScrollIndicator } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<>
<ScrollIndicator />
<ScrollIndicator target="#my-panel" color="gradient" size="md" />
</>
);
}API
targetstring''- CSS selector for the scroll container to track. Defaults to the window when empty.
position'top' | 'bottom''top'- Which edge the indicator sticks to.
size'sm' | 'md' | 'lg''sm'- Bar thickness: sm (2px), md (3px), lg (4px).
color'accent' | 'gradient''accent'- Fill color mode. Accent uses
--accent-primary. Gradient blends from primary to secondary.
See Also
- ProgressProgress indicator as a bar or spinner, with determinate and indeterminate modes. Shows completion state for uploads, installations, and long-running operations.
- Scroll SpyTracks scroll position and highlights the active navigation link.
- Scroll AreaStyled scrollable container with custom thin scrollbar styling for Webkit and Firefox, configurable orientation, and optional max-height constraint.