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.

Components

Scroll Indicator

navigation

interactive

<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 for smooth, jank-free rendering. 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 and gradient (primary → secondary) — 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 for smooth, jank-free updates
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

target string ='': 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.

Scroll Indicator

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight