Progress

Bootstrap's progress component built with Svelte 5. Use it to display progress indicators with support for stacked bars, animated backgrounds, and text labels.

Playground

Experiment with the Progress component by adjusting the props below:

Interactive Playground

Controls

Value (%)

25%

Color Variant

Height

Striped

Animated (requires Striped)

Show Label

Preview

Code

            
            <ProgressBar
  valueNow={25}>
</ProgressBar>

Basic Example

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. The component is fully accessible with the proper ARIA attributes.

            
            <ProgressBar valueNow={25} />

Bar Sizing

Height

You can specify a custom height for the progress bar by setting the style property. The inner progress bar will automatically resize accordingly.

            
            <ProgressBar valueNow={25} style="height: 1px;" />
<ProgressBar valueNow={25} style="height: 20px;" />

Labels

Add labels to your progress bars by placing text within the ProgressBar component.

25%

            
            <ProgressBar valueNow={25}>
  25%
</ProgressBar>

Backgrounds

Use backgroundColorVariant property to change the appearance of individual progress bars.

            
            <ProgressBar valueNow={25} backgroundColorVariant="success" />
<ProgressBar valueNow={50} backgroundColorVariant="info" />
<ProgressBar valueNow={75} backgroundColorVariant="warning" />
<ProgressBar valueNow={100} backgroundColorVariant="danger" />

For progress bars with a custom background color and labels, the component will automatically adjust the text color to ensure sufficient contrast.

25%

50%

75%

100%

            
            <ProgressBar valueNow={25} backgroundColorVariant="success">25%</ProgressBar>
<ProgressBar valueNow={50} backgroundColorVariant="info">50%</ProgressBar>
<ProgressBar valueNow={75} backgroundColorVariant="warning">75%</ProgressBar>
<ProgressBar valueNow={100} backgroundColorVariant="danger">100%</ProgressBar>

Multiple Bars

You can include multiple progress components inside a ProgressStacked container to create a single stacked progress bar.

            
            <ProgressStacked>
  <ProgressBar valueNow={15} />
  <ProgressBar valueNow={30} backgroundColorVariant="success" />
  <ProgressBar valueNow={20} backgroundColorVariant="info" />
</ProgressStacked>

Striped

Add barProps={{ isStriped: true }} to apply a stripe via CSS gradient over the progress bar's background color.

            
            <ProgressBar valueNow={10} barProps={{ isStriped: true }} />
<ProgressBar valueNow={25} backgroundColorVariant="success" barProps={{ isStriped: true }} />
<ProgressBar valueNow={50} backgroundColorVariant="info" barProps={{ isStriped: true }} />
<ProgressBar valueNow={75} backgroundColorVariant="warning" barProps={{ isStriped: true }} />
<ProgressBar valueNow={100} backgroundColorVariant="danger" barProps={{ isStriped: true }} />

Animated Stripes

The striped gradient can also be animated. Add barProps={{ isStriped: true, isAnimated: true }} to animate the stripes right to left via CSS3 animations.

            
            <ProgressBar
  valueNow={75}
  barProps={{ isStriped: true, isAnimated: true }}
/>

API Reference

ProgressBar Props

Name	Type	Default	Description
`ariaLabel`	`string`	`'Progress Bar'`	Accessible label for screen readers describing the progress bar.
`backgroundColorVariant`	`string`	—	Bootstrap color variant for the progress bar. Values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'.
`barProps`	`object`	`{}`	Additional props to pass to the inner progress bar element.
`class`	`string`	—	Additional CSS classes to apply to the component.
`elementRef`	`HTMLDivElement`	`null`	Reference to the DOM element.
`style`	`string`	—	Inline styles to apply to the progress container.
`valueMax`	`number`	`100`	Maximum value for the progress bar.
`valueMin`	`number`	`0`	Minimum value for the progress bar.
`valueNow`	`number`	`0`	Current progress value, used to calculate the percentage completion.

barProps Object

Name	Type	Default	Description
`isStriped`	`boolean`	`false`	Apply a striped pattern to the progress bar.
`isAnimated`	`boolean`	`false`	Apply an animated effect to the striped progress bar. Only works when `isStriped` is true.
`class`	`string`	—	Additional CSS classes to apply to the inner progress bar element.
`style`	`string`	—	Inline styles to apply to the inner progress bar element.

ProgressStacked Props

Name	Type	Default	Description
`class`	`string`	—	Additional CSS classes to apply to the stacked progress container.
`elementRef`	`HTMLDivElement`	`null`	Reference to the DOM element.

CSS Classes

The components apply Bootstrap's progress classes based on the provided props:

progress - Base container class for the progress component
progress-bar - Applied to the inner progress bar element
progress-stacked - Applied to the container when using multiple progress bars
bg-{variant} - Applied based on the backgroundColorVariant prop
progress-bar-striped - Applied when barProps.isStriped is true
progress-bar-animated - Applied when barProps.isAnimated is true

Accessibility

The progress component follows WAI-ARIA patterns for progress indicators, including the proper role="progressbar" and ARIA attributes (aria-valuenow, aria-valuemin, aria-valuemax, and aria-label).