Progress — uicraft

Default

Progress bars at various fill percentages.

html

0%

25%

50%

75%

100%

<div class="uc-w-full uc-bg-neutrals-subtle uc-rounded-full uc-h-2">
  <div class="uc-bg-accents-blue uc-h-2 uc-rounded-full" style="width: 50%"></div>
</div>

With Label

Progress bar displaying the current percentage.

html

Loading... 33%

Uploading... 67%

Complete 100%

<div>
  <div class="uc-flex uc-justify-between uc-items-center uc-mb-2">
    <span class="uc-text-sm uc-font-medium">Loading...</span>
    <span class="uc-text-sm uc-text-fg-disabled">33%</span>
  </div>
  <div class="uc-w-full uc-bg-neutrals-subtle uc-rounded-full uc-h-2">
    <div class="uc-bg-accents-blue uc-h-2 uc-rounded-full" style="width: 33%"></div>
  </div>
</div>

Sizes

Small (4px), medium (8px), and large (12px) height variants.

html

Small (4px)

Medium (8px)

Large (12px)

<!-- Small (4px) -->
<div class="uc-w-full uc-bg-neutrals-subtle uc-rounded-full uc-h-1">
  <div class="uc-bg-accents-blue uc-h-1 uc-rounded-full" style="width: 60%"></div>
</div>

<!-- Medium (8px) -->
<div class="uc-w-full uc-bg-neutrals-subtle uc-rounded-full uc-h-2">
  <div class="uc-bg-accents-blue uc-h-2 uc-rounded-full" style="width: 60%"></div>
</div>

<!-- Large (12px) -->
<div class="uc-w-full uc-bg-neutrals-subtle uc-rounded-full uc-h-3">
  <div class="uc-bg-accents-blue uc-h-3 uc-rounded-full" style="width: 60%"></div>
</div>

Animated

Progress bar with a CSS fill animation.

html

<div class="uc-w-full uc-bg-neutrals-subtle uc-rounded-full uc-h-2">
  <div class="uc-bg-accents-blue uc-h-2 uc-rounded-full progress-animated"></div>
</div>

Colors

Progress bars using semantic colors.

html

Primary

Success

Warning

Danger

<!-- Primary -->
<div class="uc-w-full uc-bg-neutrals-subtle uc-rounded-full uc-h-2">
  <div class="uc-bg-accents-blue uc-h-2 uc-rounded-full" style="width: 70%"></div>
</div>

<!-- Success -->
<div class="uc-w-full uc-bg-neutrals-subtle uc-rounded-full uc-h-2">
  <div class="uc-bg-accents-green uc-h-2 uc-rounded-full" style="width: 70%"></div>
</div>

<!-- Warning -->
<div class="uc-w-full uc-bg-neutrals-subtle uc-rounded-full uc-h-2">
  <div class="uc-bg-accents-yellow uc-h-2 uc-rounded-full" style="width: 70%"></div>
</div>

<!-- Danger -->
<div class="uc-w-full uc-bg-neutrals-subtle uc-rounded-full uc-h-2">
  <div class="uc-bg-accents-red uc-h-2 uc-rounded-full" style="width: 45%"></div>
</div>

In Context

File upload progress example.

Uploading Files

3 of 5 files uploaded

design-mockup.fig 100%

icon-set.svg 100%

photo-hero.jpg 100%

presentation.pdf 62%

video-demo.mp4 Queued

API Reference

All CSS classes available for the Progress component.

Class	Type	Description
`uc-w-full uc-bg-neutrals-subtle uc-rounded-full`	Base	Track container — full width, muted background, pill shape
`uc-bg-accents-blue uc-rounded-full`	Fill	Default progress fill (primary blue)
`uc-bg-accents-green`	Fill	Success progress fill
`uc-bg-accents-yellow`	Fill	Warning progress fill
`uc-bg-accents-red`	Fill	Danger progress fill
`uc-h-1`	Size	Small track height (4px)
`uc-h-1.5`	Size	Contextual track height (6px)
`uc-h-2`	Size	Default track height (8px)
`uc-h-3`	Size	Large track height (12px)
`uc-transition-all`	Modifier	Smooth width transition for animated value changes
`progress-animated`	Modifier	CSS keyframe animation for continuous fill effect
`uc-flex uc-justify-between uc-items-center`	Layout	Label row above the progress bar
`uc-text-sm uc-font-medium`	Typography	Progress label text
`uc-text-sm uc-text-fg-disabled`	Typography	Percentage value text

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
Label	Add aria-label or aria-labelledby describing what is progressing
Updates	Dynamic progress changes should be announced via aria-live on the container
Indeterminate	For unknown progress, omit aria-valuenow to indicate indeterminate state