Scroll Indicator

Components

Scroll Indicator

navigation

interactive

<arc-scroll-indicator>

Overview

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

Use scroll indicator on short pages where scrolling is minimal
Stack multiple scroll indicators — one per scroll context is sufficient
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: `
    <ScrollIndicator />
    <ScrollIndicator target="#my-panel" color="gradient" size="md" />
  `,
})
export class ArticlePage {}

import { ScrollIndicator } from '@arclux/arc-ui-solid';

<ScrollIndicator />
<ScrollIndicator target="#my-panel" color="gradient" size="md" />

import { ScrollIndicator } from '@arclux/arc-ui-preact';

<ScrollIndicator />
<ScrollIndicator target="#my-panel" color="gradient" size="md" />

API

Prop	Type	Default	Description
`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.