Lines Loader
A restrained line-based loader for short indeterminate waits, route latency, data loading, and lightweight product states.
Overview
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.
Install Command
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Usage Code
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Component Code
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Example Production Use Case
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.1.0
Jul 21, 2026Props
| 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.
Request a Custom Loader Animation
Need a custom effect? Tell us what to create.
