# loading × # progress

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

Animations⚛ TSX Live preview

Loading bar with percent + rotating tips

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

30100Open

Featured UI Elements⚛ TSX 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⚛ TSX Live preview

Loading Overlay State

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

HTMLCSSReactAdvanced

000Open

Progress Bar with Percent

Determinate progress bar with percent readout and striped animation.