Feedback Progress

Progress

Linear progress bars and circular ring indicators. Bars are pure CSS - set --wf-progress-value to control fill. Rings use a conic-gradient driven by --wf-progress-percent (0–100, no unit).

Basic Bar & Labels

Minimal

Set --wf-progress-value inline. The default bar color is the primary brand color.

HTML 
<div class="wf-progress" style="--wf-progress-value: 55%">
  <div class="wf-progress-bar"></div>
</div>

With Label

wf-progress-wrap stacks a label row above the bar. wf-progress-value-label right-aligns the numeric value.

Storage 72%
CPU Usage 38%
Memory 91%
HTML 
<div class="wf-progress-wrap">
  <div class="wf-progress-label">
    <span>Storage</span>
    <span class="wf-progress-value-label">72%</span>
  </div>
  <div class="wf-progress" style="--wf-progress-value: 72%">
    <div class="wf-progress-bar wf-progress-info"></div>
  </div>
</div>

Colors

Color Variants applied to wf-progress-bar

A standard set of colors can be applied to each progress bar.

primary
secondary
positive
negative
alert
info
sage
indigo
HTML 
<!-- Color on the bar -->
<div class="wf-progress" style="--wf-progress-value: 65%">
  <div class="wf-progress-bar wf-progress-primary"></div>
</div>

Sizes & Shape

Height Sizes

Applies sm, lg, and xl sizes.

sm - 0.375rem
default - 0.625rem
lg - 1rem
xl - 1.5rem (text fits inside)
70%
HTML 
<div class="wf-progress wf-progress-sm" style="--wf-progress-value: 70%">
  <div class="wf-progress-bar"></div>
</div>

<div class="wf-progress wf-progress-lg" style="--wf-progress-value: 70%">
  <div class="wf-progress-bar"></div>
</div>

<!-- XL: text fits inside the bar -->
<div class="wf-progress wf-progress-xl" style="--wf-progress-value: 70%">
  <div class="wf-progress-bar wf-progress-primary">70%</div>
</div>

Pill Shape wf-progress-rounded

Applies border-radius: 999rem to both the track and fill.

55%
HTML 
<div class="wf-progress wf-progress-rounded" style="--wf-progress-value: 65%">
  <div class="wf-progress-bar wf-progress-primary"></div>
</div>

Striped & Animated

Striped wf-progress-striped

Diagonal stripe overlay on the fill. Works with any color or size.

HTML 
<div class="wf-progress wf-progress-striped wf-progress-lg"
     style="--wf-progress-value: 60%">
  <div class="wf-progress-bar wf-progress-primary"></div>
</div>

Animated wf-progress-animated

Scrolls the stripes. Always combine with wf-progress-striped .

HTML 
<div class="wf-progress wf-progress-striped wf-progress-animated wf-progress-lg"
     style="--wf-progress-value: 70%">
  <div class="wf-progress-bar wf-progress-primary"></div>
</div>

Indeterminate

Unknown duration wf-progress-indeterminate

A looping shuttle animation. No --wf-progress-value is needed – the bar width and position are driven entirely by the animation.

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

Multi-Segment

Multiple fills wf-progress-multi

Place multiple wf-progress-bar children inside the container. Set --wf-progress-value on each bar individually. The first and last children receive the appropriate border-radius from the track.

Disk usage breakdown 80% used
Sprint completion
HTML 
<div class="wf-progress wf-progress-multi wf-progress-lg">
  <div class="wf-progress-bar wf-progress-primary"   style="--wf-progress-value: 35%"></div>
  <div class="wf-progress-bar wf-progress-info"      style="--wf-progress-value: 25%"></div>
  <div class="wf-progress-bar wf-progress-alert"     style="--wf-progress-value: 15%"></div>
  <div class="wf-progress-bar wf-progress-secondary" style="--wf-progress-value:  5%"></div>
</div>

Attached

Attached Top wf-progress-attached-top

Absolute overlay pinned to the top edge of a position: relative parent. No border, no radius.

Loading content…

HTML 
<div class="wf-relative">
  <div class="wf-progress wf-progress-attached-top"
       style="--wf-progress-value: 100%">
    <div class="wf-progress-bar wf-progress-primary"></div>
  </div>
  <p>Loading content…</p>
</div>

Inline Flush wf-progress-attached

Removes margin, border, and radius for embedding inside an existing bordered element.

Processing upload…

HTML 
<div class="wf-overflow-hidden">
  <div class="wd-card-pad-sm"><p>Processing upload…</p></div>
  <div class="wf-progress wf-progress-attached wf-progress-lg"
       style="--wf-progress-value: 100%">
    <div class="wf-progress-bar wf-progress-positive"></div>
  </div>
</div>

Disabled

Disabled State wf-progress-disabled

Applies 50% opacity and removes pointer events. Works with any bar variant.

HTML 
<div class="wf-progress wf-progress-disabled wf-progress-lg"
     style="--wf-progress-value: 60%">
  <div class="wf-progress-bar wf-progress-primary"></div>
</div>

Progress Ring

A pure-CSS circular indicator using conic-gradient . Set --wf-progress-percent to an integer 0–100 (no unit). Text inside uses wf-progress-ring-value ; a caption below uses wf-progress-ring-label .

Basic Rings

Basic rings revert to the default dark color.

0%

Empty

25%

Quarter

60%

Progress

100%

Complete

HTML 
<div class="wf-progress-ring" style="--wf-progress-percent: 60">
  <span class="wf-progress-ring-value">60%</span>
</div>
<p class="wf-progress-ring-label">Progress</p>

Ring Colors

Rings can use standard colors.

70%

primary

55%

secondary

90%

positive

30%

negative

65%

alert

80%

info

45%

sage

75%

indigo

HTML 
<div class="wf-progress-ring wf-progress-primary" style="--wf-progress-percent: 70">
  <span class="wf-progress-ring-value">70%</span>
</div>

Ring Sizes

Ring sizes vary from xs to 2xl.

60%

xs - 3rem

60%

small - 4.5rem

60%

default - 6rem

60%

lg - 8rem

60%

xl - 10rem

60%

2xl - 12rem

HTML 
<div class="wf-progress-ring wf-progress-ring-xs"  style="--wf-progress-percent: 60"></div>
<div class="wf-progress-ring wf-progress-ring-sm"  style="--wf-progress-percent: 60">...</div>
<div class="wf-progress-ring"                      style="--wf-progress-percent: 60">...</div>
<div class="wf-progress-ring wf-progress-ring-lg"  style="--wf-progress-percent: 60">...</div>
<div class="wf-progress-ring wf-progress-ring-xl"  style="--wf-progress-percent: 60">...</div>
<div class="wf-progress-ring wf-progress-ring-2xl" style="--wf-progress-percent: 60">...</div>

Ring Indeterminate wf-progress-ring-indeterminate

Spinning ring for unknown-duration loading states. No percent value is needed.

HTML 
<div class="wf-progress-ring wf-progress-ring-indeterminate"></div>

<!-- With color -->
<div class="wf-progress-ring wf-progress-ring-indeterminate wf-progress-primary"></div>

<!-- With size -->
<div class="wf-progress-ring wf-progress-ring-indeterminate wf-progress-ring-lg wf-progress-positive"></div>

Custom Properties

Bar

Property Default
--wf-progress-value 0%
--wf-progress-bar-color var(--primary-color)
--wf-progress-track-color var(--wf-surface-subtle)
--wf-progress-height 0.625rem
--wf-progress-radius var(--wf-radius-2)
--wf-progress-stripe-color rgba(255,255,255,.2)

Ring

Property Default
--wf-progress-percent 0
--wf-progress-size 4.5rem
--wf-progress-ring-width 0.25rem
--wf-progress-ring-fill-color var(--dark-color)
--wf-progress-ring-track-color var(--wf-surface-subtle)

Class Reference

All modifier classes available on .wf-progress

Class Type Description
wf-progress Base Track container. Set --wf-progress-value: 75% to control fill width.
wf-progress-bar Child Fill bar. Must be a direct child of wf-progress . Inherits width from --wf-progress-value .
wf-progress-wrap / -label / -value-label Layout Wrapper with label row. wf-progress-label holds the text; wf-progress-value-label right-aligns the numeric value.
wf-progress-sm / -lg / -xl Size Track height: sm (0.375rem), default (0.625rem), lg (1rem), xl (1.5rem).
wf-progress-rounded Shape Full pill radius on the track and bar.
wf-progress-* Color Color variants. Applied to wf-progress-bar . primary · secondary · alert · positive · negative · info · sage · indigo
wf-progress-success / -warning / -error Semantic Semantic state colors. Applied to the wf-progress container, not the bar.
wf-progress-striped Modifier Diagonal stripe overlay on the fill bar.
wf-progress-animated Modifier Animates the stripes. Use with wf-progress-striped .
wf-progress-indeterminate Modifier Looping bar of unknown length. No --wf-progress-value needed.
wf-progress-multi Modifier Multi-segment bar. Multiple wf-progress-bar children, each with its own --wf-progress-value .
wf-progress-attached Position Inline flush fit – removes margin, border, and radius. Use inside existing bordered containers.
wf-progress-attached-top / -bottom Position Absolute overlay pinned to the top or bottom edge of a position: relative parent.
wf-progress-disabled State 50% opacity, pointer-events off.
wf-progress-ring Ring base Circular indicator. Set --wf-progress-percent: 75 (integer 0–100, no unit).
wf-progress-ring-xs / -sm / -lg / -xl / -2xl Ring size Ring diameter: xs (3rem), sm (6rem), default (4.5rem), lg (8rem), xl (10rem), 2xl (12rem).
wf-progress-ring-value / -label Ring child ring-value renders text inside the ring (z-index: 1). ring-label goes below the ring element.
wf-progress-ring-indeterminate Ring state Spinning indeterminate ring. No percent value is needed.
Show More