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