Skip to content
Ben Serkan ZararsızComponents

Loaders12

Spinners, waves, skeletons and shimmer. All of them announce themselves to screen readers and stand still for people who prefer reduced motion.

Ring Spinner

  • CSS
  • SVG

An arc that grows, shrinks and turns at the same time – the classic material motion, in a few lines of SVG and CSS.

Loading
Color Indigo
48px
4.0
1.4s
0.15
Line cap

Dot Wave

  • CSS

Dots in a wave. Three motions, one rhythm – the delay is derived from the cycle so it stays musical at any speed.

Loading
Motion
3
Color Auto
12px
8px
12px
1.2s

Equalizer

  • CSS

Bars that rise and fall out of step, like audio levels. Delays are shuffled so the pattern never repeats visibly.

Loading
5
Color Emerald
6px
4px
40px
4px
1.0s

Skeleton

  • CSS

Holds the shape of a card while its content loads, so nothing jumps when it arrives. One soft shimmer across all blocks.

3
1.6s
100deg
12px

Orbit

  • CSS
  • 3D

Planets on tilted orbits, each ring slower than the one inside it. Real 3D transforms, no canvas.

Loading
3
Color #a855f7
112px
64deg
8px
1.2s

Pulse Rings

  • CSS

Rings breathe out from a point – for "live", "listening" or "searching nearby".

Searching
3
Color Rose
128px
2px
2.4s

Gooey Drops

  • CSS
  • SVG filter

Drops that merge and split like liquid metal. An SVG blur plus a contrast matrix melts the circles together.

Loading
4
8
Color Indigo
24px
40px
2.0s

Shimmer Text

  • CSS

A band of light runs through the letters – the way AI tools say "working on it". Clipped gradient, no extra elements.

Thinking…
Shine Auto
32px
20%
2.0s

Line

  • CSS

Indeterminate progress for the top of a page or card: two segments chasing each other at different paces.

Color Indigo
4px
2px
2.0s

Infinity

  • CSS
  • SVG

A comet on a figure eight. The dash length and speed are free – short and fast feels busy, long and slow feels calm.

Loading
Color Amber
30
3.0
128px
1.6s

Typing

  • CSS

The chat bubble that says someone is writing. The label tells screen readers who.

Serkan is typing
Bubble Auto
Dots Auto
8px
1.2s

Grid Wave

  • CSS

A diagonal wave through a 3×3 grid. Square cells feel technical, round ones feel friendly – try the radius.

Loading
Color Auto
16px
4px
4px
1.3s