@vaadin/vaadin-lumo-styles/src/components/progress-bar.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2000 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@media lumo_components_progress-bar {
  :host {
    display: block;
    width: 100%; /* prevent collapsing inside non-stretching column flex */
    height: round(var(--lumo-size-l) / 10, 1px);
    margin: var(--lumo-space-s) 0;
  }

  :host([hidden]) {
    display: none !important;
  }

  [part='bar'] {
    height: 100%;
    border-radius: var(--lumo-border-radius-m);
    background-color: var(--lumo-contrast-10pct);
  }

  [part='value'] {
    height: 100%;
    transform-origin: 0 50%;
    border-radius: var(--lumo-border-radius-m);
    background-color: var(--lumo-primary-color);
    /* Use width instead of transform to preserve border radius */
    transform: none;
    width: calc(var(--vaadin-progress-value) * 100%);
    will-change: width;
    transition: 0.1s width linear;
  }

  :host([dir='rtl']) [part='value'] {
    transform-origin: 100% 50%;
  }

  @media (forced-colors: active) {
    [part='bar'] {
      outline: 1px solid;
    }

    [part='value'] {
      background-color: AccentColor !important;
      forced-color-adjust: none;
    }
  }

  /* Indeterminate mode */
  :host([indeterminate]) [part='value'] {
    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
      to right,
      var(--lumo-primary-color-10pct) 10%,
      var(--lumo-primary-color)
    );
    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
      to left,
      var(--lumo-primary-color-10pct) 10%,
      var(--lumo-primary-color)
    );
    width: 100%;
    background-color: transparent !important;
    background-image: var(--lumo-progress-indeterminate-progress-bar-background);
    opacity: 0.75;
    will-change: transform;
    animation: vaadin-progress-indeterminate 1.6s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  @keyframes vaadin-progress-indeterminate {
    0% {
      transform: scaleX(0.015);
      transform-origin: 0% 0%;
    }

    25% {
      transform: scaleX(0.4);
    }

    50% {
      transform: scaleX(0.015);
      transform-origin: 100% 0%;
      background-image: var(--lumo-progress-indeterminate-progress-bar-background);
    }

    50.1% {
      transform: scaleX(0.015);
      transform-origin: 100% 0%;
      background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
    }

    75% {
      transform: scaleX(0.4);
    }

    100% {
      transform: scaleX(0.015);
      transform-origin: 0% 0%;
      background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
    }
  }

  :host(:not([aria-valuenow])) [part='value']::before,
  :host([indeterminate]) [part='value']::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: var(--lumo-primary-color);
    will-change: opacity;
    animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  @keyframes vaadin-progress-pulse3 {
    0% {
      opacity: 1;
    }

    10% {
      opacity: 0;
    }

    40% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    50.1% {
      opacity: 1;
    }

    60% {
      opacity: 0;
    }

    90% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  /* Contrast color */
  :host([theme~='contrast']) [part='value'],
  :host([theme~='contrast']) [part='value']::before {
    background-color: var(--lumo-contrast-80pct);
    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
      to right,
      var(--lumo-contrast-5pct) 10%,
      var(--lumo-contrast-80pct)
    );
    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
      to left,
      var(--lumo-contrast-5pct) 10%,
      var(--lumo-contrast-60pct)
    );
  }

  /* Error color */
  :host([theme~='error']) [part='value'],
  :host([theme~='error']) [part='value']::before {
    background-color: var(--lumo-error-color);
    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
      to right,
      var(--lumo-error-color-10pct) 10%,
      var(--lumo-error-color)
    );
    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
      to left,
      var(--lumo-error-color-10pct) 10%,
      var(--lumo-error-color)
    );
  }

  /* Primary color */
  :host([theme~='success']) [part='value'],
  :host([theme~='success']) [part='value']::before {
    background-color: var(--lumo-success-color);
    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
      to right,
      var(--lumo-success-color-10pct) 10%,
      var(--lumo-success-color)
    );
    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
      to left,
      var(--lumo-success-color-10pct) 10%,
      var(--lumo-success-color)
    );
  }

  /* RTL specific styles */
  :host([indeterminate][dir='rtl']) [part='value'] {
    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
      to left,
      var(--lumo-primary-color-10pct) 10%,
      var(--lumo-primary-color)
    );
    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
      to right,
      var(--lumo-primary-color-10pct) 10%,
      var(--lumo-primary-color)
    );
    animation: vaadin-progress-indeterminate-rtl 1.6s infinite cubic-bezier(0.355, 0.045, 0.645, 1);
  }

  :host(:not([aria-valuenow])[dir='rtl']) [part='value']::before,
  :host([indeterminate][dir='rtl']) [part='value']::before {
    animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(0.355, 0.045, 0.645, 1);
  }

  @keyframes vaadin-progress-indeterminate-rtl {
    0% {
      transform: scaleX(0.015);
      transform-origin: 100% 0%;
    }

    25% {
      transform: scaleX(0.4);
    }

    50% {
      transform: scaleX(0.015);
      transform-origin: 0% 0%;
      background-image: var(--lumo-progress-indeterminate-progress-bar-background);
    }

    50.1% {
      transform: scaleX(0.015);
      transform-origin: 0% 0%;
      background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
    }

    75% {
      transform: scaleX(0.4);
    }

    100% {
      transform: scaleX(0.015);
      transform-origin: 100% 0%;
      background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
    }
  }

  /* Contrast color */
  :host([theme~='contrast'][dir='rtl']) [part='value'],
  :host([theme~='contrast'][dir='rtl']) [part='value']::before {
    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
      to left,
      var(--lumo-contrast-5pct) 10%,
      var(--lumo-contrast-80pct)
    );
    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
      to right,
      var(--lumo-contrast-5pct) 10%,
      var(--lumo-contrast-60pct)
    );
  }

  /* Error color */
  :host([theme~='error'][dir='rtl']) [part='value'],
  :host([theme~='error'][dir='rtl']) [part='value']::before {
    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
      to left,
      var(--lumo-error-color-10pct) 10%,
      var(--lumo-error-color)
    );
    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
      to right,
      var(--lumo-error-color-10pct) 10%,
      var(--lumo-error-color)
    );
  }

  /* Primary color */
  :host([theme~='success'][dir='rtl']) [part='value'],
  :host([theme~='success'][dir='rtl']) [part='value']::before {
    --lumo-progress-indeterminate-progress-bar-background: linear-gradient(
      to left,
      var(--lumo-success-color-10pct) 10%,
      var(--lumo-success-color)
    );
    --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
      to right,
      var(--lumo-success-color-10pct) 10%,
      var(--lumo-success-color)
    );
  }
}