Progress

Progress bars and indicators for displaying task completion and loading states.

Basic Progress Bar

Default progress bar showing completion percentage.

25%

50%

75%
HTML 
<div class="focus-progress">
  <div class="focus-progress-bar" style="width: 25%">25%</div>
</div>

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

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

Sizes

Different progress bar sizes using .focus-progress-sm and .focus-progress-lg.

Small:

Default:

60%

Large:

60%
HTML 
<div class="focus-progress focus-progress-sm">
  <div class="focus-progress-bar" style="width: 60%"></div>
</div>

<div class="focus-progress focus-progress-lg">
  <div class="focus-progress-bar" style="width: 60%">60%</div>
</div>

Colors

Contextual color variants for different states and meanings.

Primary
Success
Info
Warning
Danger
Secondary
HTML 
<div class="focus-progress-bar focus-progress-bar-success" style="width: 40%">Success</div>
<div class="focus-progress-bar focus-progress-bar-info" style="width: 60%">Info</div>
<div class="focus-progress-bar focus-progress-bar-warning" style="width: 75%">Warning</div>
<div class="focus-progress-bar focus-progress-bar-danger" style="width: 90%">Danger</div>

Striped Progress

Add .focus-progress-striped for a striped pattern.

40%
60%
80%
HTML 
<div class="focus-progress focus-progress-striped">
  <div class="focus-progress-bar" style="width: 40%">40%</div>
</div>

Animated Progress

Add .focus-progress-animated to animate the stripes.

Loading...
HTML 
<div class="focus-progress focus-progress-striped focus-progress-animated">
  <div class="focus-progress-bar" style="width: 65%">Loading...</div>
</div>

Progress with External Label

Display the percentage outside the progress bar using .focus-progress-labeled.

35%

70%
HTML 
<div class="focus-progress-labeled">
  <div class="focus-progress">
    <div class="focus-progress-bar" style="width: 35%"></div>
  </div>
  <span class="focus-progress-label">35%</span>
</div>

Circular Progress

Circular progress indicator using .focus-progress-circle.

25%
50%
75%
HTML 
<div class="focus-progress-circle" style="--progress-degrees: 180deg;">
  <span class="focus-progress-circle-value">50%</span>
</div>

<!-- Calculate degrees: percentage * 3.6 -->
<!-- Example: 75% = 75 * 3.6 = 270deg -->

CSS Classes Reference

Class Description
.focus-progress Main progress container
.focus-progress-bar Progress bar element
.focus-progress-sm Small size variant
.focus-progress-lg Large size variant
.focus-progress-bar-success Success color
.focus-progress-bar-warning Warning color
.focus-progress-bar-danger Danger color
.focus-progress-bar-info Info color
.focus-progress-bar-secondary Secondary color
.focus-progress-striped Striped pattern
.focus-progress-animated Animated stripes (requires striped)
.focus-progress-labeled Container for external label
.focus-progress-label External label element
.focus-progress-circle Circular progress indicator
.focus-progress-circle-value Value display inside circular progress