Question 1

Which loader should I use for a real wait state?

Accepted Answer

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.

Question 2

When does a loader actually earn its place?

Accepted Answer

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.

Question 3

When should I avoid showing a preloader?

Accepted Answer

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.

Question 4

How do loaders stay honest and lightweight?

Accepted Answer

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.

Question 5

How should loading states be announced accessibly?

Accepted Answer

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.

Question 6

What should loaders look like on mobile?

Accepted Answer

Keep them short, light, and clear. Avoid full-screen blocking animations unless the user genuinely cannot proceed until the task completes.

Question 7

How should reduced motion handle loaders and preloaders?

Accepted Answer

Replace animated loops with static progress text, a simple bar, skeleton content, or an instant reveal once content is ready. The wait should remain clear without continuous motion.

Loaders

Numeric Tunnel Loader

Stack Loader

Lines Loader

Questions, Answered.

Which loader should I use for a real wait state?

When does a loader actually earn its place?

When should I avoid showing a preloader?

How do loaders stay honest and lightweight?

How should loading states be announced accessibly?

Request a Custom Loader

Build the interaction layer your website is missing.

Loaders

Numeric Tunnel Loader

Stack Loader

Lines Loader

Questions, Answered.

Which loader should I use for a real wait state?

When does a loader actually earn its place?

When should I avoid showing a preloader?

How do loaders stay honest and lightweight?

How should loading states be announced accessibly?

Request a Custom Loader