Spinner

Feedback

Loading spinner with size variants, color customization, and center/inline positioning

Variants

Default

Primary

Secondary

Accent

Info

Success

Warning

Error

Glass

Gradient

Classic Spinner Types

Ring

Dots

Dashed

Bars

Dot Ring

Unique & Creative Types

Orbit

Multi-orbit system

Pulse

Expanding circles

Square

Corner animation

Triangle

Geometric pattern

Wave

Sequential bars

Spiral

Expanding spiral

Infinity

∞ symbol path

Flower

Petal pattern

Grid

9-cell grid

Bounce

Bouncing dots

Sizes

Small

Medium

Large

2XL

Animation Types

Spin

Pulse

Bounce

Ping

Thickness

Thin

Default

Thick

With Labels

Processing...

Please wait...

Speed Control

Slow (0.5x)

Normal (1x)

Fast (2x)

Very Fast (3x)

Fullscreen Overlay

In Buttons

With Custom Logo/Icon

Image URL

Custom Component

Building...

SVG Icon

Usage Guidelines

When to Use

Button loading
Overlay loading
Small component loading

Accessibility

aria-busy on parent
Visually hidden loading text

Performance

CSS animation only
No JavaScript

Common Mistakes

Spinner for page load (use Skeleton)
No loading text for screen readers

Frequently Asked Questions

Use Spinner for unknown wait times or overlay loading. Use Skeleton when you know content structure.

Yes, Spinner comes in sm, md, lg, and xl sizes.

View on GitHub

See the full source code on GitHub

Related Components

View all

Alert

Contextual messaging with severity variants, dismissal, icons, and action button integration

Backdrop

Backdrop overlay for modals with blur effects and click-to-close functionality

Progress

Progress indicator with determinate/indeterminate modes, labels, and variant system including gradients

Result

Full-page status displays for success, error, and HTTP status codes (404, 403, 500) with action buttons