Skip to content
UI Kit
Accent color

Progress and states

Progress bars and rings, skeletons while content loads, empty states with the next step and stat cards with a key number.

4 components · 13 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

progress

Progress

Bars, rings and steps that show how far something has come.

Props and details · Progress

Bars

Uploads, a stacked storage bar and three sizes.

Rings

One number per ring, with a free middle.

Steps

Numbered, bars and dots for flows with several steps.

Checklist

Onboarding tasks with a ring that follows each tick.

empty-state

Empty state

First runs, empty searches, errors and finished inboxes, with a next step.

Props and details · Empty state

First run

A drawn stack of cards and two ways to begin, inside an app.

States

Done, error, locked and offline as small cards.

skeleton

Skeleton

Placeholders in the shape of the content, with a soft light that stays still for reduced motion.

Props and details · Skeleton

Cards

Article cards that swap to content without moving.

List and dashboard

An inbox list and a report with stats and a chart.

Article

A long read in its final rhythm while it loads.

stat-card

Stat card

One number that matters, with change, sparkline or goal.

Props and details · Stat card

Row

Four stats in one frame with hairlines.

With sparkline

Linked cards with an icon and a twelve week line.

Feature and goals

One large accent card with a sparkline, two cards with goals.

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Progress and states on a page.

Often searched

Jump to

Copied to the clipboard