Question 1

What is a progress bar?

Accepted Answer

A bar that fills as a task moves toward done: an upload, an install, a checklist, a quota. Each example here is shadcn.io's Progress, styled with Tailwind CSS, with a track, a fill and optional `ProgressLabel` and `ProgressValue` parts. It comes for React on Base UI, React Aria, Ark UI and Radix UI, and for Vue, Svelte and Solid on Ark UI.

Question 2

Are these progress examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution. Seeing the code and installing it takes a free shadcn.io account.

Question 3

Progress or Spinner: which one?

Accepted Answer

Use Progress when you can measure the work: bytes sent, steps done, items processed. Use a Spinner when you can't, and only need to say that something is happening.

Question 4

When should I use a circular progress instead?

Accepted Answer

A bar suits a row of text or a form, where it can be wide. In a tight spot, such as a card corner or beside an avatar, shadcn.io's Circular Progress shows the same value in a ring. A number on its own works when the exact value matters more than the picture.

Question 5

How do I show a label and a percentage?

Accepted Answer

Put `ProgressLabel` and `ProgressValue` inside `Progress`. They sit above the bar, the value at the end of the row, and `ProgressValue` prints the percentage unless you give it your own text, such as 7 of 10.

Question 6

How do I color the bar?

Accepted Answer

Progress has no color prop, so the colored examples set classes on `Progress` that reach the fill and the track, using theme colors: `destructive`, `success`, `warning` and `info`. To change color by value, pick the class from the value in your own code.

Question 7

How do I change the bar's height?

Accepted Answer

Each theme style sets its own track height. The size examples set another with a class on `Progress` that reaches the track, from 4px to 24px. Use thin bars in dense rows and thick ones when progress is the focus of the screen.

Question 8

How do I install a progress example?

Accepted Answer

Sign in with a free account, open the example and run the install command it shows. It adds the example and the Progress component it uses to your project, for your framework and UI library.

Question 9

How do I update the bar as work advances?

Accepted Answer

Pass a new `value` as the work advances. The fill has a transition, so it slides to the new width. On Ark UI, and so in Vue, Svelte and Solid, always pass `value`: without one the bar starts at 50.

Question 10

How do I show progress I can't measure?

Accepted Answer

Pass `null` as `value` on Base UI, Ark UI, Radix UI, Vue, Svelte and Solid, or `isIndeterminate` on React Aria. The bar then reports that the amount is unknown. If there's nothing to measure at all, a Spinner is usually clearer.

Question 11

Which libraries do progress examples use?

Accepted Answer

shadcn.io's Progress (built on Base UI, React Aria, Ark UI or Radix UI in React, and on Ark UI in Vue, Svelte and Solid) and Tailwind CSS.

Question 12

Are the progress bars accessible?

Accepted Answer

The bar has the progressbar role and reports its value. On Base UI and React Aria, `ProgressLabel` names it; on Radix UI the label examples link it with `aria-labelledby`; bars with no visible label pass `aria-label`. On Ark UI, and so in Vue, Svelte and Solid, the bar is named by its value text, so keep what it measures in visible text nearby.

Question 13

Do the examples work in Vue, Svelte and Solid?

Accepted Answer

Yes. The bars look the same on every target: the same heights, colors and label layout. Only the prop names differ where the libraries differ, such as `maxValue` on React Aria for `max`.

Progress Examples

Complete Progress

Empty Progress

Half Progress

Quarter Progress

Three Quarters Progress

Danger

Gradient

Info

Success

Warning

Default

Extra Large

More component examples

Skeleton

Sonner

Spinner

Alert

Empty State

Radio Group

Scroll Area

Separator

Progress examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every progress example. One prompt away.