@telekom/scale-components/dist/collection/components/progress-bar/progress-bar.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

:host {
  --track-color: var(--telekom-color-ui-faint);
  --bar-color: var(--telekom-color-primary-standard);

  --icon-color-error: var(--telekom-color-text-and-icon-functional-danger);
  --track-color-error: var(--telekom-color-functional-danger-subtle);
  --bar-color-error: var(--telekom-color-functional-danger-standard);

  --icon-color-success: var(--telekom-color-text-and-icon-functional-success);
  --track-color-success: var(--telekom-color-functional-success-subtle);
  --bar-color-success: var(--telekom-color-functional-success-standard);

  --bar-color-disabled: var(--telekom-color-ui-disabled);
  --color-disabled: var(--telekom-color-text-and-icon-disabled);

  --progress-bar-outer-size: 6px;
  --progress-bar-inner-size: var(--telekom-spacing-composition-space-03);
  --font-label: var(--telekom-text-style-ui);
  --color-label: var(--telekom-color-text-and-icon-standard);

  --color-status-description: var(--telekom-color-text-and-icon-additional);
  --font-status-description: var(--telekom-text-style-small-bold);
}

.progress-bar {
  width: 100%;
  max-width: 30rem;
}

.progress-bar--disabled {
  cursor: not-allowed;
}

.progress-bar__top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-bar--disabled .progress-bar__label,
.progress-bar--disabled .progress-bar__status {
  color: var(--color-disabled);
}

.progress-bar__label {
  display: block;
  padding: var(--telekom-spacing-composition-space-05) 0;
  color: var(--color-label);
  font: var(--font-label);
}

.progress-bar__wrapper {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}

.progress-bar__outer {
  width: 100%;
  height: var(--progress-bar-outer-size);
  margin-left: 0;
  overflow: hidden;
  position: relative;
  border-radius: var(--telekom-radius-pill);
  background: var(--track-color);
}

.progress-bar__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--progress, 0);
  height: var(--progress-bar-inner-size);
  display: flex;
  align-items: center;
  white-space: nowrap;
  justify-content: flex-end;
  border-radius: var(--telekom-radius-pill);
  border: 1px solid transparent;
  background: var(--bar-color);
  transition: width var(--telekom-motion-duration-immediate)
    var(--telekom-motion-easing-standard);
}

.progress-bar--disabled .progress-bar__inner {
  background: var(--bar-color-disabled);
}

.progress-bar__status {
  padding: var(--telekom-spacing-composition-space-05) 0;
  font: var(--font-label);
  font-variant-numeric: tabular-nums;
}

.progress-bar--completed .progress-bar__icon {
  color: var(--icon-color-success);
}
.progress-bar--completed .progress-bar__outer {
  background: var(--track-color-success);
}
.progress-bar--completed .progress-bar__inner {
  background: var(--bar-color-success);
}

.progress-bar--has-error .progress-bar__icon {
  color: var(--icon-color-error);
}
.progress-bar--has-error .progress-bar__outer {
  background: var(--track-color-error);
}
.progress-bar--has-error .progress-bar__inner {
  background: var(--bar-color-error);
}

.progress-bar__status-description {
  color: var(--color-status-description);
  font: var(--font-status-description);
  margin-top: var(--telekom-spacing-composition-space-04);
}

.progress-bar__aria-live {
  clip: rect(0 0 0 0);
  width: 1px;
  border: 0;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
}