> Markdown version of [Styling](https://vaadin.com/docs/v24/components/progress-bar/styling). Section index: [llms.txt](https://vaadin.com/docs/v24/components/llms.txt)

# Styling

## <a id="css-selectors"></a>CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the [Styling documentation](https://vaadin.com/docs/v24/styling.md) for more details on how to style components.

- Root element

  `vaadin-progress-bar`

### <a id="states"></a>States

- Indeterminate

  `vaadin-progress-bar[indeterminate]`

### <a id="parts"></a>Parts

- Track (bar)

  `vaadin-progress-bar::part(bar)`

- Indicator (value)

  `vaadin-progress-bar::part(value)`

### <a id="style-variants"></a>Style Variants

- Contrast

  `vaadin-progress-bar[theme="contrast"]`

- Success

  `vaadin-progress-bar[theme="success"]`

- Error

  `vaadin-progress-bar[theme="error"]`