Animated Spinner Components

Dev Design Library indexes 213 Animated spinner components from 45 open-source UI libraries, with the most coming from Amicro Micro Transitions, ReUI, Shadcn Space, Kinetics and UI Lab. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the spinner components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Spinner components belong to the Feedback group.

Showing 120 of 213, a mix from every library. Open a library to see all of its components.

• Spinnershadcn/ui · ReactAn indicator that can be used to show a loading state.
• Lattice LoaderReact Bits · ReactSmall loading indicator: a 3x3 or 4x4 grid of cells lit in a looping pattern (orbit, snake, ripple, pulse) that…
• LoadingdaisyUI · CSS (Tailwind)
• SpinnerChakra UI · ReactUsed to provide a visual cue that an action is processing
• SpinnerHeroUI · ReactDisplays an animated loading indicator.
• Spinner To Check Morphtransitions.dev · HTML/CSSLoading spinner that turns into a check mark when the action succeeds.
• Basic spinner.ReUI · ReactBasic spinner.
• Accordion LoaderAmicro Micro Transitions · ReactAccordion Loader loading animation.
• Base Ui SpinLobe UI · ReactSpinning loading indicator that can wrap content while it loads.
• AI State LoadingKokonut UI · ReactAgent progress as a list of steps with a live log, elapsed time and a summary when done.
• loaderIntent UI · Reactloader
• LoaderbeUI · ReactLoading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs…
• Loading StateSpectrum UI · ReactA pixel-grid loader with a shimmering label and live elapsed timer.
• Bars SpinnerSpell UI · ReactA loading spinner with rotating bars animation.
• SpinnerVengeance UI · React
• SpinnerUser Interface Wiki · React
• SpinnerToolcraft · React
• LoaderPanel UI · React NativeNine loading animations behind one variant prop.
• Progress 09 - Page Loading & IndeterminateShadcn Space · ReactTop page loading bar that trickles and finishes on navigation, plus an indeterminate progress bar for tasks with…
• Helix SpinnerPixel Perfect · ReactA column of bars, each offset a few degrees on the Y axis, spinning together as a twisting 3D helix.
• Spin LoaderOpenSourceUI · ReactMinimal spinning loader built on a lucide icon — defaults to Loader, but pass any icon prop. Sizes: sm, md, lg.
• Equalizer BarsKinetics · HTML/CSSPhase-offset bars pump like an audio meter — pure CSS
• SpinnerComponentry · React
• SpinnerShadcn Dashboard · React
• Spell Bar SpinnerAnimations (Svelte) · Svelte
• Claude Code StatusNotra · ReactThe orange spinner line while Claude works and the dim "✻ Worked for 19s" summary after a turn.
• Terminal LoaderGreatUI · React
• Inline LoaderGenerative Loaders · React
• SpinnerShark UI · ReactA spinner for displaying a loading state.
• SpinnerWatermelon UI · React
• Loader SetUI Lab · ReactFour loaders that each know how to finish: leapfrog dots, an inchworm bar, a ring that closes into a check.
• SpinnerHextaUI · ReactA loading indicator with Apple-style ticks or a breathing ring that can wait before showing and stay long enough not…
• Streaming Speech PanelLocalMode · ReactA streaming-TTS status surface: active state (WaveformActivityBars + spinner, synthesizing/playing label…
• LoadingCojeev UI · ReactThree indeterminate signals: a morphing Bloom, gathering Orbit or handing-off Relay. The original small seed stays the…
• LoadersVelora UI · ReactFive tiny CSS loading indicators — dots, pulse, orbit, bars and spinner.
• SpinnerHalaska UI · React
• End Loading Spinnersv-particles · Svelte
• LoadingSpaceUI · ReactMatrix pixel grid loader with Tailwind color support, spring motion presets, and assistant status cards.
• Aria SpinnerReScript shadcn · ReScript
• Dynamic Notch Activity IndicatorCue Foundations · React
• SpinnerD2Studio UI · ReactAn indicator that can be used to show a loading state.
• Pixel LoaderEaseUI · ReactA 3x3 grid of cells that twinkle on independent, randomized cycles, paired with a shimmering label and an optional…
• Animated LoaderReactFrame · ReactA loading spinner kit with 4 variants, rotating lines, ring, dual counter-rotating ring, and bouncing dots, sharing a…
• LoaderAceternity UI · React
• Spinnerark-cn · ReactA shadcn-style spinner component built with Ark UI primitives.
• LoaderChakra UI · React
• Matrix Dot Loadertransitions.dev · HTML/CSS
• Animated loading dotsReUI · ReactAnimated loading dots
• App Icon LoadAmicro Micro Transitions · ReactApp Icon Load loading animation.
• LoaderKokonut UI · ReactAnimated loading indicator with rotating gradient rings, size variants and customizable title text. Built with React…
• Loading StatesbeUI · ReactCovers work before a durable plan is available.
• SpinnerSpectrum UI · ReactA loading spinner with multiple sizes and variants for async states.
• SpinnerSpell UI · ReactA loading spinner component with customizable size and color.
• Skeleton 05 - Loading to ContentShadcn Space · ReactBlog card that shows a matching skeleton while loading, fades in the real content, and can be reloaded to replay the…
• Text LoaderOpenSourceUI · ReactAnimated text loader with a spinning color orb and staggered letter pulses. Pass text, variant, and textColor to match…
• Indeterminate BarKinetics · HTML/CSSLooping sweep for unknown-length work
• Claude SpinnerNotra · ReactClaude's animated starburst spinner.
• Pixel LoaderUI Lab · ReactA tiny pixel grid that cycles spiral, snake, pulse and checker, then draws a check when done.
• LoaderLocalMode · ReactA small family of busy indicators (dots / pulse / typing / spinner) plus a Shimmer skeleton-text variant, shown while…
• Loading Spinnersv-particles · Svelte
• SpinnerSpaceUI · ReactDisplays an animated spinning ring while an action or page is loading, reassuring users that their request is being…
• Base SpinnerReScript shadcn · ReScript
• Pull To RefreshEaseUI · ReactA pull-down gesture over scrollable content: the indicator tracks the finger 1:1, then resists past the trigger…
• Spinner overlay on cardReUI · ReactSpinner overlay on card
• Apple BreatheAmicro Micro Transitions · ReactApple Breathe loading animation.
• Pull To RefreshbeUI · ReactNative-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.
• Spinner 02 - ThrobberShadcn Space · ReactClassic 8-bar radial throbber with stepped rotation and opacity gradient.
• Orbit SpinnerKinetics · HTML/CSSA dual-arc ring rotates on a tight infinite loop — pure CSS
• Gemini SparkleNotra · ReactGemini's three-dot mark that bounces and folds into a triangle.
• Promise ToastUI Lab · ReactOne toast that morphs from saving to saved, or to an error with retry.
• Start Loading Spinnersv-particles · Svelte
• Spinner color variantsReUI · ReactSpinner color variants
• Apple Pulse DotsAmicro Micro Transitions · ReactApple Pulse Dots loading animation.
• Spinner 03 - PinwheelShadcn Space · React6-blade pinwheel spinner with opacity gradient and continuous rotation.
• Radar PulseKinetics · HTML/CSSConcentric rings expand and fade like sonar
• Pull To RefreshUI Lab · ReactPull the feed down and new posts slide in at the top.
• Spinners in buttons.ReUI · ReactSpinners in buttons.
• Apple Scale PulseAmicro Micro Transitions · ReactApple Scale Pulse loading animation.
• Spinner 04 - Circle FilledShadcn Space · ReactCircular arc spinner with a dim background ring and rotating filled arc.
• Segment LoaderKinetics · HTML/CSSStepped bars fill one after another on each run
• Spinners in badges.ReUI · ReactSpinners in badges.
• Arc TracerAmicro Micro Transitions · ReactArc Tracer loading animation.
• Spinner 05 - EllipsisShadcn Space · ReactThree dots with staggered scale and opacity wave animation.
• Stale While RevalidateKinetics · HTML/CSSThe old value ghosts as the fresh one springs into place
• Spinner in input group.ReUI · ReactSpinner in input group.
• Bar CascadeAmicro Micro Transitions · ReactBar Cascade loading animation.
• Spinner 07 - Orbital SpinnerShadcn Space · ReactA central core with three orbiting rings that spin in opposite directions with varying opacity and size.
• Submit StatesKinetics · HTML/CSSLabel to bouncing dots to a settled checkmark
• Spinner in empty state.ReUI · ReactSpinner in empty state.
• Bar SweepAmicro Micro Transitions · ReactBar Sweep loading animation.
• Spinner 08 - Clock RingShadcn Space · ReactA clock-style loading indicator with a rotating ring and a marker arm that completes a full rotation.
• Wave LoaderKinetics · HTML/CSSThree dots in a phase-offset vertical bounce
• Button loading statesReUI · ReactButton loading states
• Bobbing DotsAmicro Micro Transitions · ReactBobbing Dots loading animation.
• Spinner 10 - Liquid WaveShadcn Space · ReactA mathematically precise 1:1 replica of a liquid wave Lottie animation with TextMorph text transitions.
• Overlay loading spinnerReUI · ReactOverlay loading spinner
• Bounce DotsAmicro Micro Transitions · ReactBounce Dots loading animation.
• Full page loading stateReUI · ReactFull page loading state
• Bouncing BarsAmicro Micro Transitions · ReactBouncing Bars loading animation.
• Inline loading text with spinnerReUI · ReactInline loading text with spinner
• Bouncing DotsAmicro Micro Transitions · ReactBouncing Dots loading animation.
• Bouncing LinesAmicro Micro Transitions · ReactBouncing Lines loading animation.
• Bouncing SquareAmicro Micro Transitions · ReactBouncing Square loading animation.
• Breathe RingAmicro Micro Transitions · ReactBreathe Ring loading animation.
• Breathing GlowAmicro Micro Transitions · ReactBreathing Glow loading animation.
• Breathing SquareAmicro Micro Transitions · ReactBreathing Square loading animation.
• Circuit Trace DrawAmicro Micro Transitions · ReactPCB electrical circuit trace self-drawing with terminal node pulse.
• Circular BarsAmicro Micro Transitions · ReactCircular Bars loading animation.
• Classic SpinnerAmicro Micro Transitions · ReactClassic Spinner loading animation.
• Clock SpinnerAmicro Micro Transitions · ReactClock Spinner loading animation.
• Comet SpinnerAmicro Micro Transitions · ReactComet Spinner loading animation.
• Concentric PulseAmicro Micro Transitions · ReactConcentric Pulse loading animation.
• Concentric RingAmicro Micro Transitions · ReactConcentric Ring loading animation.
• Concentric SquaresAmicro Micro Transitions · ReactConcentric Squares loading animation.
• Conveyor LoopAmicro Micro Transitions · ReactConveyor Loop loading animation.
• Cross SpinnerAmicro Micro Transitions · ReactCross Spinner loading animation.
• Cube Flip SpringAmicro Micro Transitions · ReactCube Flip Spring loading animation.
• Dash RingAmicro Micro Transitions · ReactDash Ring loading animation.
• Dashed SpiralAmicro Micro Transitions · ReactDashed Spiral loading animation.
• Diamond GridAmicro Micro Transitions · ReactDiamond Grid loading animation.

Libraries with Animated spinner components

• Amicro Micro Transitions
• ReUI
• Shadcn Space
• Kinetics
• UI Lab

Related categories

• Spinner Components
• React Spinner Components
• Tailwind CSS Spinner Components
• shadcn/ui Spinner Components
• Animated Feedback Components
• Animated Progress Components
• Animated Skeleton Components
• Animated Progress Bar Components
• Animated Status Indicator Components
• Animated Typing Indicator Components
• Animated Empty State Components
• Animated Badge Components
• Animated Chip Components
• Animated Notification Components
• Animated Alert Components
• Animated Progress Circle Components
• Animated Scroll Progress Components
• Animated Banner Components
• Animated Loading Screen Components
• Animated Error State Components