Progress

Linear and circular progress indicators with semantic intents, labels, stripes, and indeterminate mode.

Upload progress 65%

Size

Shape

Show Value

Striped

Animated

Indeterminate

Intent

<script lang="ts">
  import { Progress } from '@urbicon-ui/blocks';

  let value = $state(65);
</script>

<Progress
  {value}
  showValue
/>

01 Examples

Custom value format

Override the value display with formatValue — typical for step counters, storage limits, or units.

Steps 3 of 5

Storage 750 MB

<Progress value={3} max={5} label="Steps" showValue formatValue={(v, m) => `${v} of ${m}`} />
<Progress value={750} max={1000} label="Storage" showValue formatValue={(v) => `${v} MB`} />

Profile completion

Track multi-field completion with a value label that drives user action.

Complete your profile 3 of 5 steps

Profile completion

Add a profile photo and verify your email to finish.

<div class="border-border-subtle bg-surface-elevated w-full space-y-3 rounded-2xl border p-5">
  <div class="flex items-center justify-between">
    <span class="text-text-primary text-sm font-medium">Complete your profile</span>
    <span class="text-text-tertiary text-xs">3 of 5 steps</span>
  </div>
  <Progress
    value={60}
    intent="success"
    size="sm"
    label="Profile completion"
    formatValue={() => '60%'}
  />
  <p class="text-text-tertiary text-xs">
    Add a profile photo and verify your email to finish.
  </p>
</div>

Upload Progress

Progress bar in a realistic file upload context.

project-assets.zip 12.4 MB / 18.6 MB

<div class="border-border-subtle bg-surface-elevated w-full space-y-3 rounded-2xl border p-5">
  <div class="flex items-center justify-between">
    <span class="text-text-primary text-sm font-medium">project-assets.zip</span>
    <span class="text-text-tertiary text-xs">12.4 MB / 18.6 MB</span>
  </div>
  <Progress value={67} intent="primary" size="sm" striped animated />
</div>

Dashboard Stats

Circular progress for key metrics.

92%

Uptime

67%

CPU

34%

Memory

<div class="flex gap-8">
  <div class="flex flex-col items-center gap-2">
    <Progress value={92} shape="circular" intent="success" showValue size="lg" />
    <span class="text-text-secondary text-xs font-medium">Uptime</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <Progress value={67} shape="circular" intent="warning" showValue size="lg" />
    <span class="text-text-secondary text-xs font-medium">CPU</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <Progress value={34} shape="circular" intent="primary" showValue size="lg" />
    <span class="text-text-secondary text-xs font-medium">Memory</span>
  </div>
</div>

02 Customization

Slot Overrides

The linear bar exposes track and fill (plus wrapper, header, label, and valueText; circular mode has its own circular* slots). A thicker pill track with a soft intent tint — value logic and dark mode stay untouched.

Storage 72%

<Progress
  value={72}
  label="Storage"
  showValue
  slotClasses={{
    track: 'h-3 rounded-full bg-primary/10',
    fill: 'rounded-full'
  }}
/>

unstyled drops all default classes but keeps the role="progressbar" semantics and value wiring — rebuild the bar from slotClasses alone. A gauge style used on every dashboard card belongs in a BlocksProvider preset (presets.Progress) — see Customization.

03 Accessibility

ARIA Progressbar

Uses role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax. In indeterminate mode, aria-valuenow is omitted to signal unknown progress.

Label

The label prop is set as aria-label on the progressbar element so screen readers announce the purpose of the indicator.

Reduced Motion

Indeterminate animation, striped animation, and circular spin are all suppressed when prefers-reduced-motion is enabled. The progress indicator remains visible in a static state.

04 API Reference

20 props

Prop	Type	Default	Description
`animated`	`boolean`	`false`	Animate the striped pattern. Requires `striped` to be true.
`circularSize`	`number`	`80`	Diameter of the circular indicator in pixels.
`class`	`string`	—	Extra classes merged onto the root wrapper element.
`formatValue`	`(value: number, max: number) => string`	(v, max) => `${Math.round((v/max) * 100)}%`	Format function for the displayed value.
`indeterminate` variant	true	`false`	Controls the indeterminate behavior and appearance of the Progress component. Available options: true.
`intent` variant	dangerneutralprimarysecondary +2 more	`primary`	Controls the color theme and semantic meaning of the Progress. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more.
`label`	`string`	—	Text label displayed above or inside the progress indicator.
`max`	`number`	`100`	Maximum value for the progress range.
`min`	`number`	`0`	Minimum value for the progress range.
`preset`	`string`	—	Apply a named preset registered via `<BlocksProvider presets={{ Progress: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project.
`shape`	linearcircular	`'linear'`	Shape of the progress indicator.
`showValue`	`boolean`	`false`	Show the numeric value (percentage or absolute) next to the label.
`size` variant	lgmdsmxs	`md`	Controls the dimensions, padding, and text size of the Progress. Affects the component's physical footprint. Available options: lg, md, sm, xs.
`slotClasses`	`Partial<Record<ProgressSlots, string>>`	—	Per-slot class overrides merged with tv() styles. Slots: wrapper (linear root — what `class` targets in linear shape) \| header \| label \| valueText \| track \| fill \| circularWrapper (circular root — what `class` targets in circular shape) \| circularTrack \| circularFill \| circularLabel.
`striped`	`boolean`	`false`	Display striped pattern on the fill.
`strokeWidth`	`number`	`6`	Stroke width of the circular indicator in pixels.
`unstyled`	`boolean`	—	Remove all default tv() classes.
`value`	`number`	—	Current progress value (0–100). Omit for indeterminate mode.
`...HTMLAttributes<HTMLDivElement>` inherited	`HTMLAttributes`	—	HTML attributes (excluding: 'children' \| 'class')
`...ProgressVariants` variant	`VariantProps`	—	Styling variants from ProgressVariants

05 Types

Local type definitions used by this component.

3 types

Only referenced

Name	Kind	Category	Used by	Description
ProgressProps	interface	props	0	—
ProgressVariants	type	variant	1	—
ProgressSlots	type	variant	0	Slot names derived from the `tv()` config above — single source of truth for `slotClasses`.

06 Installation

Import

import { Progress } from '@urbicon-ui/blocks';

llm.txt