Progress

Linear progress bars for loading states and completion.

Basic

Preview

<div class="progress">
  <div class="progress-bar" style="width: 40%"></div>
</div>

<div class="progress color-primary">
  <div class="progress-bar" style="width: 60%"></div>
</div>

<div class="progress color-secondary">
  <div class="progress-bar" style="width: 80%"></div>
</div>

Requires: ux.min.css

<div class="w-full h-2 rounded-full overflow-hidden bg-base-200">
  <div class="h-full rounded-full bg-primary" style="width: 40%"></div>
</div>

<div class="w-full h-2 rounded-full overflow-hidden bg-base-200">
  <div class="h-full rounded-full bg-primary" style="width: 60%"></div>
</div>

<div class="w-full h-2 rounded-full overflow-hidden bg-base-200">
  <div class="h-full rounded-full bg-secondary" style="width: 80%"></div>
</div>

Requires: tw.min.css

// Update progress with JavaScript:
// document.querySelector('.progress-bar').style.width = '75%';

Colors

Preview

<div class="progress color-info"><div class="progress-bar" style="width: 30%"></div></div>
<div class="progress color-success"><div class="progress-bar" style="width: 50%"></div></div>
<div class="progress color-warning"><div class="progress-bar" style="width: 70%"></div></div>
<div class="progress color-error"><div class="progress-bar" style="width: 90%"></div></div>

Requires: ux.min.css

<div class="w-full h-2 rounded-full overflow-hidden bg-base-200"><div class="h-full rounded-full bg-info" style="width: 30%"></div></div>
<div class="w-full h-2 rounded-full overflow-hidden bg-base-200"><div class="h-full rounded-full bg-success" style="width: 50%"></div></div>
<div class="w-full h-2 rounded-full overflow-hidden bg-base-200"><div class="h-full rounded-full bg-warning" style="width: 70%"></div></div>
<div class="w-full h-2 rounded-full overflow-hidden bg-base-200"><div class="h-full rounded-full bg-error" style="width: 90%"></div></div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Sizes

Preview

<div class="progress progress-xs color-primary"><div class="progress-bar" style="width: 50%"></div></div>
<div class="progress progress-sm color-primary"><div class="progress-bar" style="width: 50%"></div></div>
<div class="progress color-primary"><div class="progress-bar" style="width: 50%"></div></div>
<div class="progress progress-lg color-primary"><div class="progress-bar" style="width: 50%"></div></div>
<div class="progress progress-xl color-primary"><div class="progress-bar" style="width: 50%"></div></div>

Requires: ux.min.css

<div class="w-full h-0.5 rounded-full overflow-hidden bg-base-200"><div class="h-full rounded-full bg-primary" style="width: 50%"></div></div>
<div class="w-full h-1 rounded-full overflow-hidden bg-base-200"><div class="h-full rounded-full bg-primary" style="width: 50%"></div></div>
<div class="w-full h-2 rounded-full overflow-hidden bg-base-200"><div class="h-full rounded-full bg-primary" style="width: 50%"></div></div>
<div class="w-full h-3 rounded-full overflow-hidden bg-base-200"><div class="h-full rounded-full bg-primary" style="width: 50%"></div></div>
<div class="w-full h-4 rounded-full overflow-hidden bg-base-200"><div class="h-full rounded-full bg-primary" style="width: 50%"></div></div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Indeterminate

Preview

<div class="progress progress-indeterminate color-primary">
  <div class="progress-bar"></div>
</div>

Requires: ux.min.css

<!-- Indeterminate requires the CSS animation from progress.css -->
<div class="progress progress-indeterminate color-primary">
  <div class="progress-bar"></div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS animation

Striped & Animated

Preview

<div class="progress progress-striped color-primary">
  <div class="progress-bar" style="width: 60%"></div>
</div>

<div class="progress progress-striped progress-animated color-success">
  <div class="progress-bar" style="width: 45%"></div>
</div>

Requires: ux.min.css

<!-- Striped patterns require the CSS from progress.css -->
<div class="progress progress-striped color-primary">
  <div class="progress-bar" style="width: 60%"></div>
</div>

<div class="progress progress-striped progress-animated color-success">
  <div class="progress-bar" style="width: 45%"></div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS animation

With Label

Preview

Upload progress 67%

<div>
  <div class="progress-label">
    <span class="progress-label-text">Upload progress</span>
    <span class="progress-label-value">67%</span>
  </div>
  <div class="progress color-primary">
    <div class="progress-bar" style="width: 67%"></div>
  </div>
</div>

Requires: ux.min.css

<div>
  <div class="flex justify-between items-center mb-1.5 text-sm">
    <span class="font-medium text-base-content">Upload progress</span>
    <span class="text-base-content/60">67%</span>
  </div>
  <div class="w-full h-2 rounded-full overflow-hidden bg-base-200">
    <div class="h-full rounded-full bg-primary" style="width: 67%"></div>
  </div>
</div>

Requires: tw.min.css

// Update progress dynamically:
const bar = document.querySelector('.progress-bar');
const label = document.querySelector('.progress-label-value');
let percent = 67;
bar.style.width = percent + '%';
label.textContent = percent + '%';

Classes Reference

Class	Description
.progress	Base progress track
.progress-bar	Fill bar (set width with style)
.progress-xs	Extra small (2px)
.progress-sm	Small (4px)
.progress-lg	Large (12px)
.progress-xl	Extra large (16px)
.progress-indeterminate	Animated loading state
.progress-striped	Striped pattern on bar
.progress-animated	Animate striped pattern
.progress-label	Label row above progress
.progress-label-text	Label text
.progress-label-value	Percentage value