Progress Bar Styling

Styling API reference for the Progress Bar component.

Style Variants
Style Properties
CSS Selectors

Style Variants

Progress Bar comes with three style variants: contrast, success, and error.

Variant Description Supported by

Variant	Description	Supported by
`success`	When progress is satisfactory and/or nearing completion	Lumo
`error`	When progress is unsatisfactory or draw the user’s attention to a stalled or failed process	Lumo
`contrast`	Improved visibility	Lumo

success

When progress is satisfactory and/or nearing completion

Lumo

error

When progress is unsatisfactory or draw the user’s attention to a stalled or failed process

Lumo

contrast

Improved visibility

Lumo

Open in a
new tab

Source code

ProgressBarThemeVariants.javapackage com.vaadin.demo.component.progressbar;

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.progressbar.ProgressBar;
import com.vaadin.flow.component.progressbar.ProgressBarVariant;
import com.vaadin.flow.router.Route;

@Route("progress-bar-theme-variants")
public class ProgressBarThemeVariants extends VerticalLayout {

    public ProgressBarThemeVariants() {
        setPadding(false);

        // tag::snippet[]
        // Contrast
        ProgressBar progressBarContrast = new ProgressBar();
        progressBarContrast.addThemeVariants(ProgressBarVariant.LUMO_CONTRAST);
        progressBarContrast.setValue(0.5);

        // Success
        ProgressBar progressBarSuccess = new ProgressBar();
        progressBarSuccess.addThemeVariants(ProgressBarVariant.LUMO_SUCCESS);
        progressBarSuccess.setValue(0.75);

        // Error
        ProgressBar progressBarError = new ProgressBar();
        progressBarError.addThemeVariants(ProgressBarVariant.LUMO_ERROR);
        progressBarError.setValue(0.2);
        // end::snippet[]

        add(progressBarContrast, progressBarSuccess, progressBarError);
    }

}
progress-bar-theme-variants.tsximport React from 'react';
import { ProgressBar } from '@vaadin/react-components/ProgressBar.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';

function Example() {
  return (
    <VerticalLayout theme="spacing">
      {/* tag::snippet[] */}
      <ProgressBar value={0.5} theme="contrast" />
      <ProgressBar value={0.75} theme="success" />
      <ProgressBar value={0.2} theme="error" />
      {/* end::snippet[] */}
    </VerticalLayout>
  );
}

progress-bar-theme-variants.tsimport '@vaadin/progress-bar';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('progress-bar-theme-variants')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-vertical-layout theme="spacing">
        <!-- tag::snippet[] -->
        <vaadin-progress-bar value="0.5" theme="contrast"></vaadin-progress-bar>
        <vaadin-progress-bar value="0.75" theme="success"></vaadin-progress-bar>
        <vaadin-progress-bar value="0.2" theme="error"></vaadin-progress-bar>
        <!-- end::snippet[] -->
      </vaadin-vertical-layout>
    `;
  }
}

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…} selector. See Component Style Properties for more information on style properties.

Property

Supported by

--vaadin-progress-bar-animation-duration

Aura

--vaadin-progress-bar-background

Aura

--vaadin-progress-bar-border-color

Aura

--vaadin-progress-bar-border-radius

Aura

--vaadin-progress-bar-border-width

Aura

--vaadin-progress-bar-height

Aura

--vaadin-progress-bar-padding

Aura

--vaadin-progress-bar-value-background

Aura

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 for more details on how to style components.

Root element: vaadin-progress-bar

States

Indeterminate: vaadin-progress-bar[indeterminate]

Parts

Track (bar): vaadin-progress-bar::part(bar)
Indicator (value): vaadin-progress-bar::part(value)

Docs

Docs

Progress Bar Styling

Style Variants

Style Properties

CSS Selectors

States

Parts