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

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

w-progressbar w-slot[fill] {
  height: 100%;
  background: #0056b3;
  transition: width 0.3s;
}

The fill width is automatically set as a percentage.

Accessibility

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