Lines Loader
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
Pro Source Code is Locked
Subscribe to Hyperiux Pro to access this source code and 100+ others.
Usage
page.js is Locked
Subscribe to Hyperiux Pro to access this source code and 100+ others.
Component Code
LinesLoading.jsx is Locked
Subscribe to Hyperiux Pro to access this source code and 100+ others.
CenterLinesLoading.jsx is Locked
Subscribe to Hyperiux Pro to access this source code and 100+ others.
utils.js is Locked
Subscribe to Hyperiux Pro to access this source code and 100+ others.
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.
Frequently Asked Questions
When should I use Lines Loader?
Should Lines Loader show real progress?
How should Lines Loader be announced?
When is a skeleton better than Lines Loader?
What should reduced motion do for Lines Loader?
Request a Custom Loader Animation
Need a custom effect? Tell us what to create.
