Loading.dev Studio

How to use Loading.dev Studio

1. Search all 29 indicators by name, or browse the live grid to see each one animate.
2. Tune size, speed and colour with the controls, and pause all animations any time.
3. Click an indicator to open its large preview with its default duration in milliseconds.
4. Copy the React code for the selected indicator, or copy the npm install command.
5. Paste the code into your React 19 app: every indicator takes size, color and duration props.

Features

• All 29 real indicators from the loading-dev repo: Arc, Atom, Blocks, Ring, Wave and more
• The repo's own components running live in your browser, not recreations
• Size, speed and colour controls plus play/pause for every indicator
• One-click React usage code with the exact import from loading-dev
• Indicators respect reduced motion out of the box, as in the original library
• Runs fully offline in your browser: no API keys, no sign-up

Frequently asked questions