scss/_progress.scss

@use "config" as *;
@use "functions" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "mixins/tokens" as *;

$progress-tokens: () !default;

// scss-docs-start progress-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$progress-tokens: defaults(
  (
    --progress-height: 1rem,
    --progress-font-size: var(--font-size-sm),
    --progress-bg: var(--bg-2),
    --progress-border-radius: var(--radius-5),
    --progress-box-shadow: var(--box-shadow-inset),
    --progress-bar-color: var(--white),
    --progress-bar-bg: var(--primary-bg),
    --progress-bar-transition: width .6s ease,
    --progress-bar-animation: progress-bar-stripes 1s linear infinite,
  ),
  $progress-tokens
);
// scss-docs-end progress-tokens

// Disable animation if transitions are disabled

@layer components {
  // scss-docs-start progress-keyframes
  @if $enable-transitions {
    @keyframes progress-bar-stripes {
      0% { background-position-x: var(--progress-height); }
    }
  }
  // scss-docs-end progress-keyframes

  .progress,
  .progress-stacked {
    @include tokens($progress-tokens);

    display: flex;
    height: var(--progress-height);
    overflow: hidden;
    font-size: var(--progress-font-size);
    background-color: var(--progress-bg);
    @include border-radius(var(--progress-border-radius));
    @include box-shadow(var(--progress-box-shadow));
  }

  .progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--theme-contrast, var(--progress-bar-color));
    text-align: center;
    white-space: nowrap;
    background-color: var(--theme-bg, var(--progress-bar-bg));
    @include transition(var(--progress-bar-transition));
  }

  .progress-bar-striped {
    @include gradient-striped();
    background-size: var(--progress-height) var(--progress-height);
  }

  .progress-stacked > .progress {
    overflow: visible;
  }

  .progress-stacked > .progress > .progress-bar {
    width: 100%;
  }

  @if $enable-transitions {
    .progress-bar-animated {
      animation: var(--progress-bar-animation);

      @if $enable-reduced-motion {
        @media (prefers-reduced-motion: reduce) {
          animation: none;
        }
      }
    }
  }
}