# loading

Components⚛ TSX Live preview

Top Page-Load Progress Bar

A YouTube/NProgress-style bar: starts fast, trickles toward 90%, then snaps complete with a glow head.

5.7k29.4k6.1kOpen

Shimmer Skeleton Cards

Loading placeholder cards with a diagonal light sweep looping across avatar and line blocks.

HTMLCSSReactAdvanced

2.5k19.8k4.8kOpen

Shimmer Button with Loading → Success States

Tri-state CTA: idle, animated shimmer sweep with ellipsis dots while loading, then a morphing green ✓ success state.

27600Open

Shimmer Skeleton Loading Cards

Three placeholder cards with the brand-hue moving shine — drop in anywhere data is loading.

21400Open

Skeleton shimmer loading cards

Diagonal shimmer-sweep skeleton placeholders for cards and lists while content loads.

38800Open

Progressive blur-load placeholder

Blur-hash style placeholder that de-blurs and saturates into a sharp image — perceived performance win.

29800Open

Loading bar with percent + rotating tips

Gradient shimmer progress bar with a huge mono percentage and contextual tips that change per phase.

30100Open

Bouncing dots loader

Three gradient dots bounce and squash with a ripple delay, above a blinking 'loading…' label.

28700Open

3D cube spin loader

Six-faced wireframe cube rotating in perspective — pure CSS 3D transforms with glow faces.

33900Open

Featured UI Elements Live preview

Conic Ring Loader · Deep Indigo

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Deep Indigo palette.

38500Open

Conic Ring Loader · Aurora Teal

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Aurora Teal palette.

72300Open

Conic Ring Loader · Mono Pearl

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Mono Pearl palette.

45000Open

Conic Ring Loader · Ultra Violet

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Ultra Violet palette.

61400Open

Conic Ring Loader · Cyber Lime

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Cyber Lime palette.

23500Open

Conic Ring Loader · Sunset Amber

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Sunset Amber palette.

12600Open

Conic Ring Loader · Rose Gold

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Rose Gold palette.

23200Open

Conic Ring Loader · Ocean Sky

A gradient conic ring spinner masked into a clean arc — no SVG, one element. Rendered in the Ocean Sky palette.

15600Open

Featured UI Elements Live preview

Striped Progress Bar · Rose Gold

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Rose Gold palette.

52600Open

Striped Progress Bar · Ocean Sky

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Ocean Sky palette.

19400Open

Striped Progress Bar · Mint Breeze

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Mint Breeze palette.

11800Open

Striped Progress Bar · Candy Pink

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Candy Pink palette.

10200Open

Striped Progress Bar · Royal Gold

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Royal Gold palette.

55000Open

Striped Progress Bar · Crimson Heat

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Crimson Heat palette.

33800Open

Striped Progress Bar · Deep Indigo

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Deep Indigo palette.

57100Open

Striped Progress Bar · Aurora Teal

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Aurora Teal palette.

38500Open

Components Live preview

Loading Overlay State

Full-screen loading overlay with spinner, progress and shimmer text.

Circular Loader Ring

Spinner ring with rotating gradient arc and smooth easing.

Skeleton Shimmer

Loading placeholder blocks with a sweeping shimmer overlay.

Loading Button State

Button that shows a spinner while busy, then success check.

Skeleton Shimmer Loop

Skeleton blocks with continuous shimmer sweep.

Loading Shimmer Text

Skeleton text lines with shimmer for loading blocks.

Ring + Dots Combo Loader

Loading pair combining a rotating gradient ring and staggered typing dots.

Skeleton Card Loader

Card-shaped loading skeleton with sweeping shimmer overlay.

Progress Bar with Percent

Determinate progress bar with percent readout and striped animation.

Loading Button States

Button cycling idle/loading/success with spinner swap and disabled guard.

Animations⚛ TSX Live preview

Gel Blob Loader

Two gel-like blobs wobbling in a loading dance.