Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Extra Small Progress for Svelte

A progress bar at 60 percent with a 4 pixel track, for a quiet indicator in a dense layout.

UI library: Ark UI

A bar at 60 percent on a 4 pixel track. It is a thin line, with no label and no change to the default color.

Use the thin track in a dense row where a tall bar would crowd the text. A Spinner is smaller still when you have no percentage. In Svelte, Ark UI shows only the value you pass.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Progress anatomy: root, label, value, track, indicator

Usage

<Progress aria-label="Upload progress" class="w-full max-w-md *:data-[slot=progress-track]:h-1" value={60} />

FAQ

How is the track's height set?

With a class on Progress, since it has no size prop. *:data-[slot=progress-track]:h-1 makes the track 4px tall. The fill is h-full, so it follows.

How tall is it without the class?

This demo sets no height. Each theme style sets its own, from h-0.5 to h-3.

Does the height change the value?

No. value is 60 out of 100 at any height.

Does the height change the colors?

The fill is bg-primary and the track bg-muted, from the theme's progress styles. This demo adds no color class.

What is the accessible name?

Ark UI puts the progressbar role on the track and names it with the value text, here 60%. The aria-label, Upload progress, sits on the root element, so put what the bar measures in visible text nearby when it matters.

How do I update the 60?

Change value as the work advances. This demo passes a fixed 60. Always pass value: without one, Ark UI starts the bar at 50.

API Reference

Progress

Sets aria-label="Upload progress" and value={60}. The rest is on the Progress page.

All 20 progress examples