---
meta:
title: Progress Bar
description: Progress bars are used to show the status of an ongoing operation.
layout: component
---
```html:preview
```
```jsx:react
import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
const App = () => ;
```
## Examples
### Labels
Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
```html:preview
```
```jsx:react
import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
const App = () => ;
```
### Custom Height
Use the `--height` custom property to set the progress bar's height.
```html:preview
```
{% raw %}
```jsx:react
import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
const App = () => ;
```
{% endraw %}
### Showing Values
Use the default slot to show a value.
```html:preview
50%
```
```jsx:react
import { useState } from 'react';
import SlButton from '@shoelace-style/shoelace/dist/react/button';
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
const App = () => {
const [value, setValue] = useState(50);
function adjustValue(amount) {
let newValue = value + amount;
if (newValue < 0) newValue = 0;
if (newValue > 100) newValue = 100;
setValue(newValue);
}
return (
<>
{value}%
adjustValue(-10)}>
adjustValue(10)}>
>
);
};
```
### Indeterminate
The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `value` is ignored and the label, if present, will not be shown.
```html:preview
```
```jsx:react
import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
const App = () => ;
```