Progress

Progress indicators show the completion status of a task or process.

Usage

Use progress indicators to give users feedback about ongoing operations and their completion status.

Basic Progress Bar

<div class="df-progress">
  <div class="df-progress__bar" style="width: 60%"></div>
</div>

With Label

Uploading files...60%

<div class="df-progress-labeled">
  <div class="df-progress-labeled__header">
    <span>Uploading files...</span>
    <span>60%</span>
  </div>
  <div class="df-progress">
    <div class="df-progress__bar" style="width: 60%"></div>
  </div>
</div>

Sizes

Small

Medium (default)

Large

<div class="df-progress df-progress--sm">...</div>
<div class="df-progress">...</div>
<div class="df-progress df-progress--lg">...</div>

Colors

<div class="df-progress__bar df-progress__bar--success">...</div>
<div class="df-progress__bar df-progress__bar--warning">...</div>
<div class="df-progress__bar df-progress__bar--error">...</div>

Indeterminate

For operations where progress can't be determined:

<div class="df-progress df-progress--indeterminate">
  <div class="df-progress__bar"></div>
</div>

Striped

<div class="df-progress">
  <div class="df-progress__bar df-progress__bar--striped" style="width: 65%"></div>
</div>

Animated Stripes

<div class="df-progress__bar df-progress__bar--striped df-progress__bar--animated">...</div>

Circular Progress

25%

65%

Multi-segment Progress

Completed (30%) In Progress (15%) Issues (10%)

Accessibility

• Use role="progressbar" for dynamic progress
• Include aria-valuenow, aria-valuemin, and aria-valuemax
• For indeterminate progress, omit aria-valuenow
• Provide text alternatives for screen readers

<div class="df-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <div class="df-progress__bar" style="width: 60%"></div>
</div>

Best Practices

• Show progress for operations longer than 1 second
• Use determinate progress when possible
• Provide context (what's being loaded)
• Consider skeleton loading for content

API Reference

Classes

Class	Description
df-progress	Base progress bar container
df-progress--sm	Small size
df-progress--lg	Large size
df-progress--indeterminate	Indeterminate animation
df-progress__bar	Progress bar fill
df-progress__bar--primary	Primary color
df-progress__bar--success	Success color
df-progress__bar--warning	Warning color
df-progress__bar--error	Error color
df-progress__bar--striped	Striped pattern
df-progress__bar--animated	Animated stripes