ReadingIndicator
Reading progress as a classic top bar, a vertical ruler with a moving percentage, or a movable circular meter.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Usage
Examples
Playground
Bar, ruler and ring
Article range
Top of page
API
11 props
Accessibility
Exposes a named progressbar without live announcements on every scroll. The indicator does not capture scrolling or text selection; only the optional ring handle receives input. Reduced motion removes the number transition. Progress measures scroll position, not comprehension.
Notes
- Resizes and content growth are measured automatically. A non-scrollable document is complete (100%); an unresolved target starts at 0%.
- Reserve a side gutter for the ruler and room for the ring so they do not cover reading text. Set style.top to place a fixed bar below a site header. For a top bar with no extra configuration, render <ReadingIndicator /> once in the page.
- The ruler and ring are independently implemented interpretations of the Skiper UI scroll progress references; no remote assets or registry code are loaded.
Related
ProgressDeterminate and indeterminate progress with a readable task label.4 examplesScrollAreaContained scrolling with themed scrollbars and optional smooth wheel motion for article reading.2 examplesAspectRatioKeep media at a stable aspect ratio as its container resizes.1 exampleAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesButtonButton renders the Gaudi action and link-button variants.7 examplesButtonGroupGroup related actions with joined borders and consistent sizing.9 examples