`<c-progress-bar>`

A horizontal progress bar that fills a track to a known completion percentage, with an optional details line showing the value and a label.

Usage

Bind the completion percentage to value (0–100; out-of-range values are clamped for the fill). By default a details line renders below the bar — the percentage plus whatever the label prop supplies (e.g. "57 % Uploading files"). Hide it with hide-details, or place it beside the bar with single-line.

For work of unknown duration the indeterminate prop replaces the fill with a looping sweep and hides the details line.

When to use

For progress whose completion percentage is known — uploads, batch jobs, multi-step processing — or, with indeterminate, for an unknown-duration wait that should still read as a full-width bar.
When space is tight or each item in a set needs its own compact indicator, c-progress-circle is the circular determinate counterpart.
For a plain inline activity indicator use c-spinner; to cover a whole region while it loads, use c-loader.

Details line

The details line shows the raw value even when the fill clamps it, and a negative value renders the line in the error role — a hook for signalling a failed transfer while keeping the bar itself empty.

Accessibility

The bar is a native <progress> element exposing role="progressbar" with aria-valuenow while determinate; in indeterminate mode no value is exposed. The host mirrors aria-busy (true while indeterminate) and a title tooltip with the current percentage.

Customization

Restyle via the parts: ::part(root) (the outer wrapper), ::part(bar) (the visible track around the native <progress>), and ::part(details) (the percentage/label line). Colours default to the primary fill on a muted surface track.

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-progress-bar value="72" label="Uploading files" />
  </div>
</template>

Indeterminate

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-progress-bar indeterminate label="Processing data" />
  </div>
</template>

API reference

`<c-progress-bar>`

A horizontal progress bar that fills a track to a known completion percentage, with an optional details line showing the value and a label.

Properties

Property	Attribute	Type	Default	Description
`hideDetails`	`hide-details`	`boolean`	`false`	Hide the percentage display
`indeterminate`	`indeterminate`	`boolean`	`false`	Indeterminate state of the progress bar
`label`	`label`	`string`	`''`	Optional details message next to percentage display
`singleLine`	`single-line`	`boolean`	`false`	Place details next to progress bar
`value`	`value`	`number`	`0`	Progress bar value in percentage (0 to 100)

CSS parts

Style from outside with c-progress-bar::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The outer flex wrapper around the bar and the details line
`bar`	The visible track of the progress bar, wrapping the native `<progress>` element
`details`	The percentage and label text line