scroll
Scroll Progress
Page or container reading progress.
- scroll
Quick usage
import { ScrollProgress } from "@pinky-ui/effects";
<ScrollProgress />Install
Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/effectspnpm add @pinky-ui/effectsyarn add @pinky-ui/effectsnpx pinky-ui add scroll-progressPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Motion never carries the only meaning; the underlying content remains in the DOM.
- Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.
Reduced motion
The effect resolves to a static readable state when motion is reduced.
When to use
- As a restrained enhancement to meaningful content.
When not to use
- When the content or control would be unclear without motion.
Skill
Purpose
ScrollProgress is a small page or local-container progress bar that tells the reader where they are in a long experience. It supports horizontal top bars and vertical section indicators.
Use it on long editorial pages, documentation or a contained story. Keep thickness around 2–4px and contrast clear but quiet. Do not add it to short pages or use it as the only navigation for a long document.
The indicator is decorative and must not block pointer input. It updates through shared motion values without React renders per scroll frame; reduced motion may still show instantaneous progress. Provide headings/landmarks for the actual navigation.