# bar

Animations 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 Components Live preview

Emoji reaction picker bar

Four emoji reactions (Wow/Love/Huh/Fire) lift and pop on hover/click; selecting one increments its count.

39800Open

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

Progress Bar Loading

Determinate progress bar with striped animation and percentage.

HTMLCSSSimple

Scroll Progress Bar

Thin progress bar pinned to top showing scroll position.

UI Elements⚛ TSX Live preview

Dismissible Banner

Top announcement banner with gradient, icon and close action.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Progress Bar with Percent

Determinate progress bar with percent readout and striped animation.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Lifetime Value Rating Bar

Compact bar rating with segmented filled blocks and value.

HTMLCSSJavaScriptAdvanced