# 100 Loaders CSS animations

Self-contained spinners, progress indicators and motion loaders. Bundle: 8.1 KB gzip (49.1 KB minified).

```js
import "@salkomdesignstudio/sds-motion-forge/categories/loaders";
```

- [Arc](https://sds-motion-forge.netlify.app/animations/loader-arc/) — `.sds-loader-arc` — Arc — loader animation
- [Bar](https://sds-motion-forge.netlify.app/animations/loader-bar/) — `.sds-loader-bar` — Bar — loader animation
- [Bar Pulse](https://sds-motion-forge.netlify.app/animations/loader-bar-pulse/) — `.sds-loader-bar-pulse` — A bar breathes by scaling its width from narrow to full
- [Bar Swing](https://sds-motion-forge.netlify.app/animations/loader-bar-swing/) — `.sds-loader-bar-swing` — A bright sliver slides from one end of a track to the other
- [Beam](https://sds-motion-forge.netlify.app/animations/loader-beam/) — `.sds-loader-beam` — A bar wipes in from the left then exits to the right via clip-path
- [Blob](https://sds-motion-forge.netlify.app/animations/loader-blob/) — `.sds-loader-blob` — A polygon morphs through organic rounded shapes continuously
- [Blur Pulse](https://sds-motion-forge.netlify.app/animations/loader-blur-pulse/) — `.sds-loader-blur-pulse` — A dot dissolves in from a blur then fades back out
- [Bounce](https://sds-motion-forge.netlify.app/animations/loader-bounce/) — `.sds-loader-bounce` — Bounce — loader animation
- [Bounce Bar](https://sds-motion-forge.netlify.app/animations/loader-bounce-bar/) — `.sds-loader-bounce-bar` — Four bars bounce upward in sequence like bouncing columns
- [Breath](https://sds-motion-forge.netlify.app/animations/loader-breath/) — `.sds-loader-breath` — Breath — loader animation
- [Bubble](https://sds-motion-forge.netlify.app/animations/loader-bubble/) — `.sds-loader-bubble` — A ring expands outward and fades as if a bubble popping
- [Cascade Bars](https://sds-motion-forge.netlify.app/animations/loader-cascade/) — `.sds-loader-cascade` — Cascade Bars — loader animation
- [Chase Box](https://sds-motion-forge.netlify.app/animations/loader-chase-box/) — `.sds-loader-chase-box` — A bead races continuously along the host border via offset-path
- [Clock](https://sds-motion-forge.netlify.app/animations/loader-clock/) — `.sds-loader-clock` — Clock — loader animation
- [Coil](https://sds-motion-forge.netlify.app/animations/loader-coil/) — `.sds-loader-coil` — Three nested arcs spin at different speeds creating a coil illusion
- [Comet Trail](https://sds-motion-forge.netlify.app/animations/loader-comet/) — `.sds-loader-comet` — Spinning arc on a track ring
- [Crystal](https://sds-motion-forge.netlify.app/animations/loader-crystal/) — `.sds-loader-crystal` — Crystal — loader animation
- [Cube](https://sds-motion-forge.netlify.app/animations/loader-cube/) — `.sds-loader-cube` — Cube — loader animation
- [Cursor](https://sds-motion-forge.netlify.app/animations/loader-cursor/) — `.sds-loader-cursor` — A thin bar blinks on and off like a text insertion cursor
- [Data](https://sds-motion-forge.netlify.app/animations/loader-data/) — `.sds-loader-data` — Data — loader animation
- [Diamond](https://sds-motion-forge.netlify.app/animations/loader-diamond/) — `.sds-loader-diamond` — A diamond rotates 180° while pulsing scale and opacity
- [DNA Helix](https://sds-motion-forge.netlify.app/animations/loader-dna/) — `.sds-loader-dna` — DNA Helix — loader animation
- [Particle Sync](https://sds-motion-forge.netlify.app/animations/loader-dots/) — `.sds-loader-dots` — 3 dots scale to zero in staggered sync
- [Dots Bounce](https://sds-motion-forge.netlify.app/animations/loader-dots-bounce/) — `.sds-loader-dots-bounce` — Four dots bounce with a gravity arc in sequence
- [Dots Expand](https://sds-motion-forge.netlify.app/animations/loader-dots-expand/) — `.sds-loader-dots-expand` — Four dots scale in and out in a rolling sequence
- [Dots Fade](https://sds-motion-forge.netlify.app/animations/loader-dots-fade/) — `.sds-loader-dots-fade` — Four dots pulse in and out of opacity in sequence
- [Dots Flip](https://sds-motion-forge.netlify.app/animations/loader-dots-flip/) — `.sds-loader-dots-flip` — Four dots perform a staggered rotateY flip
- [Dots Wave](https://sds-motion-forge.netlify.app/animations/loader-dots-wave/) — `.sds-loader-dots-wave` — Four dots ripple up and down in a cascading wave
- [Drop](https://sds-motion-forge.netlify.app/animations/loader-drop/) — `.sds-loader-drop` — A teardrop shape falls, squashes flat on impact, then lifts off
- [Dual Ring](https://sds-motion-forge.netlify.app/animations/loader-dual-ring/) — `.sds-loader-dual-ring` — Two concentric rings spin in opposite directions
- [Eclipse](https://sds-motion-forge.netlify.app/animations/loader-eclipse/) — `.sds-loader-eclipse` — Two discs slide past each other creating an eclipse effect
- [Electric Arc](https://sds-motion-forge.netlify.app/animations/loader-electric/) — `.sds-loader-electric` — Electric Arc — loader animation
- [Equalizer](https://sds-motion-forge.netlify.app/animations/loader-equalizer/) — `.sds-loader-equalizer` — Four bars animate to different heights like an audio equalizer
- [Expand](https://sds-motion-forge.netlify.app/animations/loader-expand/) — `.sds-loader-expand` — Expand — loader animation
- [Expand Ring](https://sds-motion-forge.netlify.app/animations/loader-expand-ring/) — `.sds-loader-expand-ring` — Three concentric rings radiate outward in staggered waves
- [Fill Bar](https://sds-motion-forge.netlify.app/animations/loader-fill-bar/) — `.sds-loader-fill-bar` — A progress bar fills from left to right then fades and resets
- [Flip Card](https://sds-motion-forge.netlify.app/animations/loader-flip-card/) — `.sds-loader-flip-card` — A rectangle flips on its Y axis like continuously turning a card
- [Fluid Flow](https://sds-motion-forge.netlify.app/animations/loader-fluid/) — `.sds-loader-fluid` — Blob morphs continuously with rotation
- [Fold](https://sds-motion-forge.netlify.app/animations/loader-fold/) — `.sds-loader-fold` — A square folds in 3D perspective cycling through each axis
- [Gear](https://sds-motion-forge.netlify.app/animations/loader-gear/) — `.sds-loader-gear` — A jagged gear polygon rotates continuously like a mechanical cog
- [Glitch](https://sds-motion-forge.netlify.app/animations/loader-glitch/) — `.sds-loader-glitch` — Glitch — loader animation
- [Glow Pulse](https://sds-motion-forge.netlify.app/animations/loader-glow-pulse/) — `.sds-loader-glow-pulse` — A dot radiates a breathing drop-shadow glow that expands and contracts
- [Dot Grid](https://sds-motion-forge.netlify.app/animations/loader-grid/) — `.sds-loader-grid` — Dot Grid — loader animation
- [Halo](https://sds-motion-forge.netlify.app/animations/loader-halo/) — `.sds-loader-halo` — Two staggered rings expand outward and fade like a halo pulse
- [Helix Dots](https://sds-motion-forge.netlify.app/animations/loader-helix/) — `.sds-loader-helix` — Helix Dots — loader animation
- [Hex](https://sds-motion-forge.netlify.app/animations/loader-hex/) — `.sds-loader-hex` — Hex — loader animation
- [Hourglass](https://sds-motion-forge.netlify.app/animations/loader-hourglass/) — `.sds-loader-hourglass` — Hourglass — loader animation
- [Infinity](https://sds-motion-forge.netlify.app/animations/loader-infinity/) — `.sds-loader-infinity` — Infinity — loader animation
- [Isocube](https://sds-motion-forge.netlify.app/animations/loader-isocube/) — `.sds-loader-isocube` — A square spins on a tilted perspective axis like a 3D cube
- [Liquid Ring](https://sds-motion-forge.netlify.app/animations/loader-liquid-ring/) — `.sds-loader-liquid-ring` — Liquid Ring — loader animation
- [Matrix Bars](https://sds-motion-forge.netlify.app/animations/loader-matrix/) — `.sds-loader-matrix` — Matrix Bars — loader animation
- [Metronome](https://sds-motion-forge.netlify.app/animations/loader-metronome/) — `.sds-loader-metronome` — A thin bar pivots left and right from its base like a metronome
- [Morph](https://sds-motion-forge.netlify.app/animations/loader-morph/) — `.sds-loader-morph` — Morph — loader animation
- [Morph Geo](https://sds-motion-forge.netlify.app/animations/loader-morph-geo/) — `.sds-loader-morph-geo` — A shape morphs through square, diamond, and circle via clip-path
- [Mosaic](https://sds-motion-forge.netlify.app/animations/loader-mosaic/) — `.sds-loader-mosaic` — Mosaic — loader animation
- [Neon Flicker](https://sds-motion-forge.netlify.app/animations/loader-neon-flicker/) — `.sds-loader-neon-flicker` — A bar sputters with neon flicker like a fluorescent tube warming up
- [Neon Ring](https://sds-motion-forge.netlify.app/animations/loader-neon-ring/) — `.sds-loader-neon-ring` — Neon Ring — loader animation
- [Neural](https://sds-motion-forge.netlify.app/animations/loader-neural/) — `.sds-loader-neural` — Neural — loader animation
- [Triple Orbit](https://sds-motion-forge.netlify.app/animations/loader-orbit-3/) — `.sds-loader-orbit-3` — Triple Orbit — loader animation
- [Orbital System](https://sds-motion-forge.netlify.app/animations/loader-orbital/) — `.sds-loader-orbital` — Two particles orbit at different radii
- [Pendulum](https://sds-motion-forge.netlify.app/animations/loader-pendulum/) — `.sds-loader-pendulum` — Pendulum — loader animation
- [Ping Cascade](https://sds-motion-forge.netlify.app/animations/loader-ping/) — `.sds-loader-ping` — 3 rings expand and fade in cascade
- [Pinwheel](https://sds-motion-forge.netlify.app/animations/loader-pinwheel/) — `.sds-loader-pinwheel` — Four petal-dots fade in sequence around the cardinal positions
- [Plasma Ring](https://sds-motion-forge.netlify.app/animations/loader-plasma-ring/) — `.sds-loader-plasma-ring` — Plasma Ring — loader animation
- [Prism](https://sds-motion-forge.netlify.app/animations/loader-prism/) — `.sds-loader-prism` — Prism — loader animation
- [Progress Glow](https://sds-motion-forge.netlify.app/animations/loader-progress/) — `.sds-loader-progress` — Progress bar fills with glowing head
- [Progress Glow](https://sds-motion-forge.netlify.app/animations/loader-progress-glow/) — `.sds-loader-progress-glow` — Progress Glow — loader animation
- [Pulse](https://sds-motion-forge.netlify.app/animations/loader-pulse/) — `.sds-loader-pulse` — Pulse — loader animation
- [Quantum](https://sds-motion-forge.netlify.app/animations/loader-quantum/) — `.sds-loader-quantum` — Quantum — loader animation
- [Radar](https://sds-motion-forge.netlify.app/animations/loader-radar/) — `.sds-loader-radar` — Radar — loader animation
- [Ring System](https://sds-motion-forge.netlify.app/animations/loader-ring/) — `.sds-loader-ring` — Ring System — loader animation
- [Ring Chase](https://sds-motion-forge.netlify.app/animations/loader-ring-chase/) — `.sds-loader-ring-chase` — Two arc beads chase each other around the ring
- [Ring Split](https://sds-motion-forge.netlify.app/animations/loader-ring-split/) — `.sds-loader-ring-split` — Two opposing half-arcs counter-rotate around the same circle
- [Ripple Rings](https://sds-motion-forge.netlify.app/animations/loader-ripple/) — `.sds-loader-ripple` — Ripple Rings — loader animation
- [Ripple Dot](https://sds-motion-forge.netlify.app/animations/loader-ripple-dot/) — `.sds-loader-ripple-dot` — A central dot radiates two concentric expanding ring waves
- [Scanner](https://sds-motion-forge.netlify.app/animations/loader-scanner/) — `.sds-loader-scanner` — A horizontal scan line sweeps down through a bordered box
- [Signal Bars](https://sds-motion-forge.netlify.app/animations/loader-signal/) — `.sds-loader-signal` — Signal Bars — loader animation
- [Skeleton Pulse](https://sds-motion-forge.netlify.app/animations/loader-skeleton/) — `.sds-loader-skeleton` — Shimmer scan for loading placeholders
- [Snake](https://sds-motion-forge.netlify.app/animations/loader-snake/) — `.sds-loader-snake` — Snake — loader animation
- [Solar](https://sds-motion-forge.netlify.app/animations/loader-solar/) — `.sds-loader-solar` — Solar — loader animation
- [Spark](https://sds-motion-forge.netlify.app/animations/loader-spark/) — `.sds-loader-spark` — Spark — loader animation
- [Spin Dot](https://sds-motion-forge.netlify.app/animations/loader-spin-dot/) — `.sds-loader-spin-dot` — A bead orbits a faint ring via offset-path
- [Spin Fade](https://sds-motion-forge.netlify.app/animations/loader-spin-fade/) — `.sds-loader-spin-fade` — Four horizontal bars fade in rotational sequence like a spinner
- [Spotlight](https://sds-motion-forge.netlify.app/animations/loader-spotlight/) — `.sds-loader-spotlight` — A conic gradient wedge sweeps in a circle like a rotating spotlight
- [Squares](https://sds-motion-forge.netlify.app/animations/loader-squares/) — `.sds-loader-squares` — Four squares in a 2×2 grid pop in and out in a rolling sequence
- [Star](https://sds-motion-forge.netlify.app/animations/loader-star/) — `.sds-loader-star` — Star — loader animation
- [Stripes](https://sds-motion-forge.netlify.app/animations/loader-stripes/) — `.sds-loader-stripes` — Diagonal stripes scroll continuously along a bar
- [Swivel](https://sds-motion-forge.netlify.app/animations/loader-swivel/) — `.sds-loader-swivel` — A dot oscillates side to side with an ease-out-and-back timing
- [Tape](https://sds-motion-forge.netlify.app/animations/loader-tape/) — `.sds-loader-tape` — A ball squashes on landing and stretches on lift in a bounce loop
- [Target Lock](https://sds-motion-forge.netlify.app/animations/loader-target/) — `.sds-loader-target` — Dashed ring rotates slowly
- [Throb](https://sds-motion-forge.netlify.app/animations/loader-throb/) — `.sds-loader-throb` — An energetic overshoot pulse — more forceful and abrupt than breath
- [Ticker](https://sds-motion-forge.netlify.app/animations/loader-ticker/) — `.sds-loader-ticker` — A rectangle flips on its X axis like a flip-board display tile
- [Timer](https://sds-motion-forge.netlify.app/animations/loader-timer/) — `.sds-loader-timer` — A pie-fill sweeps around a circle like a countdown clock
- [Track](https://sds-motion-forge.netlify.app/animations/loader-track/) — `.sds-loader-track` — A dot races back and forth along a horizontal rail
- [Typewriter Loader](https://sds-motion-forge.netlify.app/animations/loader-type/) — `.sds-loader-type` — Monospace text typing in a loop
- [Vortex Spin](https://sds-motion-forge.netlify.app/animations/loader-vortex/) — `.sds-loader-vortex` — Conic gradient spins with scale pulse
- [Warp](https://sds-motion-forge.netlify.app/animations/loader-warp/) — `.sds-loader-warp` — Warp — loader animation
- [Waveform](https://sds-motion-forge.netlify.app/animations/loader-wave/) — `.sds-loader-wave` — 5 bars scale vertically as a wave
- [Windmill](https://sds-motion-forge.netlify.app/animations/loader-windmill/) — `.sds-loader-windmill` — Four rectangular blades fade in sequence at the cardinal positions
- [Yo-Yo](https://sds-motion-forge.netlify.app/animations/loader-yo-yo/) — `.sds-loader-yo-yo` — A ball drops, mini-bounces at the bottom, then snaps back up