# Loaders & Spinners
> A gallery of pure-CSS loaders: rings, dots, bars, shapes, animated logo marks, and skeleton screens.
Loading states set the tone for how fast an app feels. Every loader here is
pure CSS, so nothing runs on the main thread to animate it. Pick one, drop in
the markup, and it inherits your accent color and both themes.
## Spinners
Ring-shaped loaders, from a plain ring to a masked conic sweep. The plain ring,
`.s-spinner`, is defined in `components.css`; the others are in `techniques.css`.
```summit
Ring
Dual ring
Dashed
Arc
Orbit
```
## Dots and bars
Good for inline or indeterminate loading, and for chat "typing" states.
```summit
Bouncing dots
Wave
Equalizer
Typing
```
## Shapes
Squares, grids, and ripples for a bit more personality.
```summit
Pulse
Ripple
Grid
Flip
Bounce
```
## Animated logo marks
Three ways to bring the Summit mark to life while something loads: it breathes,
redraws its outline, or rests inside a sweeping ring. The mark is a two-part SVG
(`.sun` and `.peak`), so the same classes animate your own logo.
```summit
```
## Indeterminate bar
```summit
```
## Skeleton screens
A skeleton mirrors the shape of the content that is coming, so the layout does
not jump when it arrives. Drive the swap with a boolean in `s-data`.
```summit
AL
Ada Lovelace
Wrote the first algorithm, long before the hardware existed to run it.
` |
| Bar | `` |
| Skeleton | `.s-skel-text`, `.s-skel-title`, `.s-skel-avatar`, `.s-skel-block` |
## Accessibility
All of these respect `prefers-reduced-motion` and stop for users who ask for
less motion. Mark a pending region with `aria-busy="true"` for screen readers.