Progress — Veritheme

Default

Progress bars at various fill percentages.

html

0%

25%

50%

75%

100%

<div class="vt-progress">
  <div class="vt-progress-bar vt-inline-e73a22bd90"></div>
</div>

With Label

Progress bar displaying the current percentage.

html

Loading... 33%

Uploading... 67%

Complete 100%

<div>
  <div class="vt-flex vt-justify-between vt-items-center vt-mb-2">
    <span class="vt-text-sm vt-font-medium">Loading...</span>
    <span class="vt-text-sm vt-text-mains-quaternary">33%</span>
  </div>
  <div class="vt-progress">
    <div class="vt-progress-bar vt-inline-f13fab4c77"></div>
  </div>
</div>

Sizes

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

html

Small (4px)

Medium (8px)

Large (12px)

<!-- Small (4px) -->
<div class="vt-progress vt-h-1">
  <div class="vt-progress-bar vt-h-1 vt-inline-86d5a62908"></div>
</div>

<!-- Medium (8px) -->
<div class="vt-progress">
  <div class="vt-progress-bar vt-inline-86d5a62908"></div>
</div>

<!-- Large (12px) -->
<div class="vt-progress vt-h-3">
  <div class="vt-progress-bar vt-h-3 vt-inline-86d5a62908"></div>
</div>

Animated

Progress bar with a CSS fill animation.

html

<div class="vt-progress">
  <div class="vt-progress-bar progress-animated"></div>
</div>

Colors

Progress bars using semantic colors.

html

Primary

Success

Warning

Danger

<!-- Primary -->
<div class="vt-progress">
  <div class="vt-progress-bar vt-inline-49c9406408"></div>
</div>

<!-- Success -->
<div class="vt-progress">
  <div class="vt-progress-bar vt-bg-success-primary vt-inline-49c9406408"></div>
</div>

<!-- Warning -->
<div class="vt-progress">
  <div class="vt-progress-bar vt-bg-accents-yellow vt-inline-49c9406408"></div>
</div>

<!-- Danger -->
<div class="vt-progress">
  <div class="vt-progress-bar vt-bg-error-primary vt-inline-e17a83bd94"></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
`vt-progress`	Base	Track container — full width, muted background, pill shape
`vt-progress-bar`	Fill	Default progress fill (primary blue)
`vt-bg-success-primary`	Fill	Success progress fill
`vt-bg-accents-yellow`	Fill	Warning progress fill
`vt-bg-error-primary`	Fill	Danger progress fill
`vt-h-1`	Size	Small track height (4px)
`vt-h-1.5`	Size	Contextual track height (6px)
`vt-h-2`	Size	Default track height (8px)
`vt-h-3`	Size	Large track height (12px)
`vt-transition-all`	Modifier	Smooth width transition for animated value changes
`progress-animated`	Modifier	CSS keyframe animation for continuous fill effect
`vt-flex vt-justify-between vt-items-center`	Layout	Label row above the progress bar
`vt-text-sm vt-font-medium`	Typography	Progress label text
`vt-text-sm vt-text-mains-quaternary`	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