Progressbar

Visual progress indicator.

Usage

<w-progressbar value="60" max="100" label="Upload progress">
  <w-slot fill><div></div></w-slot>
</w-progressbar>

Props

Prop	Type	Default	Description
value	number	0	Current value
min	number	0	Minimum value
max	number	100	Maximum value
label	string	""	Accessible label

Slots

Slot	Element	Description
fill	Element	The progress fill bar

Styling

The library sets the indicator's width via the --w-fill custom property on the host (updated on every value change). You only style appearance.

w-progressbar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

w-progressbar w-slot[dot] > * {
  height: 100%;
  background: #6366f1;
  transition: width 0.3s;
}

/* Indeterminate progress */
w-progressbar[indeterminate] w-slot[dot] > * {
  width: 30%;
  animation: indeterminate 1.5s infinite linear;
}

Selector	Targets
w-progressbar[indeterminate]	Indeterminate progress (no value)
w-progressbar w-slot[dot] > *	The fill bar (width set via --w-fill)
--w-fill	Current fill percentage (set by library)

Accessibility

• role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
• aria-label from label prop