## Anatomy
The Progress Bar consists of four primary elements that work together to visually represent the completion of a task.
1. Label
2. Fill
3. Track
4. Status Indicator
## Options
The Progress Bar supports the following configurations to accommodate various progress representation scenarios.
### Status
```tsx lines theme={null}
import { ProgressBar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
| Status type | Description |
| -------------- | ------------------------------------------------------------- |
| Info (Default) | Used to convey the general use of the Progress Bar |
| Success | Optionally used to denote the completion of the Progress Bar. |
| Error | Used to convey that something went wrong with the operation. |
### Value
A numeric value visually changes the progression. Use this when the actual percentage of completion can be determined.
```tsx lines theme={null}
import { ProgressBar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Indeterminate
Set an indeterminate value when it isn't well known how long an operation will take.
```tsx lines theme={null}
import { ProgressBar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Label
#### Label
```tsx lines theme={null}
import { ProgressBar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
#### More Info
```tsx lines theme={null}
import { ProgressBar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
#### No Label
```tsx lines theme={null}
import { ProgressBar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
#### Description And Error Text
```tsx lines theme={null}
import { ProgressBar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
## Behavior
The Progress Bar responds to content overflow by wrapping text labels while maintaining consistent visual representation.
### Overflow
The text label of a Progress Bar will wrap when not enough space is provided.
```tsx lines theme={null}
import { ProgressBar } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
## Usage Guidelines
Use the Progress Bar to show the progression of a system operation.
### When to Use
Progress Bars are best used to show the progression of a system operation. This can include things such as downloading, uploading, and progress on a submission.
```tsx lines theme={null}
import { ProgressBar, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
**Do**
#### Don't use for data visualizations
Progress Bar's scope is limited to system operations. It should not be extended to contexts such as dashboard analytics and flow progression.
```tsx lines theme={null}
import { ProgressBar } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
**Don't**
#### Don't use to denote steps
Progress Bar should not be used to convey steps in a flow. Use the Stepper instead.
```tsx lines theme={null}
import { ProgressBar } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
**Don't**
### How to Use
#### Use only the colors provided
Progress Bars only support visual states for info, success, and error. Don't restyle the Progress Bar individually unless part of a wider theming.
```tsx lines theme={null}
import { ProgressBar } from "@servicetitan/anvil2";
function App() {
return (
<>
);
}
export default App;
```
**Don't**
#### Setting a value
In general, it is preferable to provide accurate reading of progression. This type of data however is frequently unavailable or unreliable. Some considerations:
* If progression can be roughly estimated and still be accurate, set a value.
* If accuracy is not realistic, the indeterminate state is preferable over an inaccurate value.
* If it's not possible to know at the start, but during processing an estimate can be made, the progress bar can start as indeterminate but become a set value.
## Content
Content within the Progress Bar should clearly communicate the task being completed and its current status.
## Keyboard Interaction
Users can navigate the Progress Bar using standard keyboard controls.
### Accessibility
#### Provide ARIA labels when a visual label is not used
When using a Progress Bar without a label, provide one through the usage of an `aria-label`.
For more guidance on progress indicators and status updates, see [changing content best practices](/docs/accessibility/changing-content).
