Loading
Loaders
Make necessary waiting moments feel clearer and more considered with loading animations that communicate activity, maintain visual continuity and reassure users that the experience is still actively responding.
Layout
Questions, Answered.
Which loader should I use for a real wait state?
Use Numeric Tunnel only when progress maps to a real signal such as upload percentage, asset warm-up, or measured initialization. Use Lines Loader for short unknown waits. Use Stack Loader for brief route or asset transitions. Use skeletons when the layout is known and content will stream into place.
When does a loader actually earn its place?
A loader earns its place during route latency, upload progress, WebGL warm-up, asset-heavy experiences, product demos, and branded launch flows. It should represent something genuinely happening.
When should I avoid showing a preloader?
Avoid preloaders on fast pages, fake delays, blocking first paint, progress numbers that lie, or loaders that hide usable content. If the page is already fast, do not manufacture a wait.
How do loaders stay honest and lightweight?
Tie animation to real load state, keep it short, avoid blocking first paint, clean up timers, and prefer skeletons when the layout is predictable. Do not let the loader outlive the wait.
How should loading states be announced accessibly?
Use aria-busy on the loading region and concise status text when the change matters. Do not spam live regions on every animation frame or announce decorative movement.
What should loaders look like on mobile?
Keep them short, light, and clear. Avoid full-screen blocking animations unless the user genuinely cannot proceed until the task completes.
Request a Custom Loader
Need a custom effect? Tell us what to create.