Lines Loader gives a real wait a visible state: lines carry a quiet indeterminate wait.
Use it for route latency, upload progress, asset warm-up, data loading, or WebGL initialization. Do not add a fake preloader to a fast page just to make it feel designed.
The main risk is dishonesty. Bind the loader to real state, use aria-busy where the region is updating, and never let a progress number claim completion before the content is ready.
Use this as loading-state implementation guidance. Verify the shipped progress model, aria-busy behavior, live-region text, timer cleanup, skeleton fallback, and reduced-motion state before relying on exact props, defaults, imports, or installation steps. Determinate progress must be tied to a real signal.
Best Used For
Short indeterminate waits where a quiet activity signal is clearer than fake progress.
Product flows where the loader should feel restrained and easy to replace with a skeleton.
Lines Loader makes real waiting visible without manufacturing delay.
Not For
Not for fast pages, fake progress, manufactured waits, or loaders that hide usable content.
Performance Budget
Tie animation to real load state, clean up timers, and avoid blocking first paint.
Accessibility and Mobile
Use aria-busy on loading regions and concise status text. On mobile and reduced motion, prefer static progress text or skeletons.
Common Mistakes
Using Lines Loader on a page that already loads quickly.
Faking determinate progress.
Announcing every animation frame to assistive technology.
Changelog
v1.0.1
Jul 21, 2026
Add prefers-reduced-motion support: hero text fades in as a single block instead of a per-letter stagger
v1.0.0
Jul 20, 2026
Initial release
Props
Prop
Type
Default
Description
duration
number
1
Overall timeline duration multiplier.
lineHeight
number
1
Rendered height of each loader line in pixels.
darkLineColor
color
#ffffff
Line color on the dark loader layer.
lightLineColor
color
#000000
Line color on the light reveal layer.
fadeOutDuration
number
0.5
Duration of the line fade-out phases.
Frequently Asked Questions
When should I use Lines Loader?
Use it when a brief indeterminate wait needs a quiet, restrained line indicator.
Should Lines Loader show real progress?
Determinate loaders should always map to real progress. Fake progress damages trust.
How should Lines Loader be announced?
Use aria-busy on the loading region and concise status text in a polite live region when useful.
When is a skeleton better than Lines Loader?
Use skeletons when the layout is known and content streams into place.
What should reduced motion do for Lines Loader?
Use static progress text, a simple bar, or skeleton content instead of looping motion.