20 Loading indicators — tap to copy code

1. Spinning circle
Classic circular spinner using border-top color and rotation.
2. Pulsing dot
Single dot scales and fades.
3. Three pulsing dots
Ellipsis-style animated dots.
4. Bouncing dots
Three dots bounce in sequence.
5. Equalizer bars
Vertical bars scale to simulate an equalizer.
6. Expanding circle
Circle grows and fades.
7. Ring
Thin rotating ring.
8. Dual ring
Two arcs rotate in opposite directions.
9. Dot roller
Three dots orbit a circle.
10. Flipping square
Square flips on X axis.
11. Cube grid
3×3 cubes scale in sequence.
12. Loading text
Text with animated trailing dots.
13. Hourglass
Two clipped halves animate to suggest sand.
14. SVG stroke spinner
SVG circle using stroke-dasharray for smooth motion.
15. Ellipsis
Four dots animate in a row.
16. Roller
Eight dots arranged in a ring, pulsing in sequence.
17. Ripple
Concentric rings expand and fade.
18. Orbit
Multiple dots orbit at different radii.
19. Dot path
A dot follows a curved SVG path using animateMotion.
20. Percent bar
Animated width simulating progress (could be driven by JS).
Copied to clipboard