Feedback

Progress

A determinate or indeterminate progress bar.

fandry-progress

Example

Link to section Example

Custom colors and parts

Link to section Custom colors and parts

The same component with a few --fd-* tokens set around it and its parts restyled. The code is under Parts below.

Props

Link to section Props

Prop	Type	Default	Description
`value`	`number`	`0`	Current progress, from 0 to max.
`max`	`number`	`100`	Maximum value.
`label`	`string`	`''`	Accessible label.
`aria-label`	`string`	`—`	The same name, set the standard way. Wins over label.
`indeterminate`	`boolean`	`false`	Shows an animated bar of unknown duration instead of value/max.

Parts

Link to section Parts

Style the elements inside the component from your own CSS with ::part(). Every fandry component renders in native shadow DOM, so parts work on LWR and Salesforce alike. For colors, spacing, radius and type across many components, set the --fd-* tokens instead. The code for the "Custom colors and parts" example above:

Part	Description
`base`	The outermost element.
`indicator`	The mark that shows the state or value: a checkbox's check, a radio's dot, a switch's thumb, a progress bar's fill.

States are extra names on a part while the state is on. Name both to style one state, e.g.fandry-checkbox::part(control checked).

State	Description
`indeterminate`	A checkbox that is neither checked nor unchecked, or a progress bar with no known value.

<!-- template -->
<div class="brand stack narrow">
  <fandry-progress value="35" label="Free shipping progress"></fandry-progress>
  <fandry-progress value="80" label="Order progress"></fandry-progress>
</div>

/* css */
/* Scoped to this demo. Set the same --fd-* tokens on :root to theme
   every fandry-* component on the site. */
.brand {
  --fd-primary: 160 84% 26%;
  --fd-bg-muted: 160 30% 90%;
}

fandry-progress::part(base) {
  height: 0.75rem;
  border-radius: 999px;
}

fandry-progress::part(indicator) {
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(160 84% 26%), hsl(45 90% 50%));
}

Code

Link to section Code

<fandry-progress value="60" label="Uploading"></fandry-progress>