metabuilder/scss/components/Progress.module.scss

// Progress Components - Material Design 3
// =======================================
// Linear and Circular progress styling using M3 tokens

// Linear Progress
.linearProgress {
  height: 4px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: var(--mat-sys-surface-container-highest);
  border-radius: var(--mat-sys-corner-full);

  .bar,
  .bar2 {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    transition: width var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard);
  }

  .bar {
    background-color: var(--mat-sys-primary);
  }

  .buffer {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: color-mix(in srgb, var(--mat-sys-primary) 30%, transparent);
    border-radius: inherit;
  }

  .dashed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(
      var(--mat-sys-surface-container-highest) 0%,
      var(--mat-sys-surface-container-highest) 16%,
      transparent 42%
    );
    background-size: 10px 10px;
    background-position: 0 -23px;
    animation: dashed-animation 3s infinite linear;
  }

  // Determinate (default)
  &.determinate {
    .bar {
      transition: width var(--mat-sys-motion-duration-medium4) var(--mat-sys-motion-easing-linear);
    }
  }

  // Indeterminate animation
  &.indeterminate {
    .bar {
      width: auto;
      animation: indeterminate-bar1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    }

    .bar2 {
      background-color: var(--mat-sys-primary);
      animation: indeterminate-bar2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
    }
  }

  // Query animation (reverse indeterminate)
  &.query {
    .bar {
      width: auto;
      animation: indeterminate-bar1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite reverse;
    }

    .bar2 {
      background-color: var(--mat-sys-primary);
      animation: indeterminate-bar2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite reverse;
    }
  }

  // Color variants using M3 tokens
  &.primary {
    .bar, .bar2 {
      background-color: var(--mat-sys-primary);
    }
    .buffer {
      background-color: color-mix(in srgb, var(--mat-sys-primary) 30%, transparent);
    }
  }

  &.secondary {
    .bar, .bar2 {
      background-color: var(--mat-sys-secondary);
    }
    .buffer {
      background-color: color-mix(in srgb, var(--mat-sys-secondary) 30%, transparent);
    }
  }

  &.tertiary {
    .bar, .bar2 {
      background-color: var(--mat-sys-tertiary);
    }
    .buffer {
      background-color: color-mix(in srgb, var(--mat-sys-tertiary) 30%, transparent);
    }
  }

  &.error {
    .bar, .bar2 {
      background-color: var(--mat-sys-error);
    }
    .buffer {
      background-color: color-mix(in srgb, var(--mat-sys-error) 30%, transparent);
    }
  }

  &.success {
    .bar, .bar2 {
      background-color: var(--color-success);
    }
    .buffer {
      background-color: color-mix(in srgb, var(--color-success) 30%, transparent);
    }
  }

  &.warning {
    .bar, .bar2 {
      background-color: var(--color-warning);
    }
    .buffer {
      background-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
    }
  }

  &.info {
    .bar, .bar2 {
      background-color: var(--color-info);
    }
    .buffer {
      background-color: color-mix(in srgb, var(--color-info) 30%, transparent);
    }
  }
}

// Circular Progress
.circularProgress {
  display: inline-flex;
  position: relative;

  .svg {
    display: block;
  }

  .track {
    stroke: var(--mat-sys-surface-container-highest);
  }

  .circle {
    stroke: var(--mat-sys-primary);
    stroke-linecap: round;
  }

  // Determinate
  &.determinate {
    .svg {
      transform: rotate(-90deg);
    }

    .circle {
      transition: stroke-dashoffset var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard);
    }
  }

  // Indeterminate
  &.indeterminate {
    animation: circular-rotate 1.4s linear infinite;

    .circle {
      animation: circular-dash 1.4s ease-in-out infinite;
      stroke-dasharray: 80px, 200px;
      stroke-dashoffset: 0;
    }
  }

  &.disableShrink {
    .circle {
      animation: none;
    }
  }

  // Color variants using M3 tokens
  &.circular-primary {
    .circle {
      stroke: var(--mat-sys-primary);
    }
    .track {
      stroke: color-mix(in srgb, var(--mat-sys-primary) 20%, transparent);
    }
  }

  &.circular-secondary {
    .circle {
      stroke: var(--mat-sys-secondary);
    }
    .track {
      stroke: color-mix(in srgb, var(--mat-sys-secondary) 20%, transparent);
    }
  }

  &.circular-tertiary {
    .circle {
      stroke: var(--mat-sys-tertiary);
    }
    .track {
      stroke: color-mix(in srgb, var(--mat-sys-tertiary) 20%, transparent);
    }
  }

  &.circular-error {
    .circle {
      stroke: var(--mat-sys-error);
    }
    .track {
      stroke: color-mix(in srgb, var(--mat-sys-error) 20%, transparent);
    }
  }

  &.circular-inherit {
    .circle {
      stroke: currentColor;
    }
    .track {
      stroke: currentColor;
      opacity: 0.2;
    }
  }
}

// Animations
@keyframes indeterminate-bar1 {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes indeterminate-bar2 {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}

@keyframes dashed-animation {
  0% {
    background-position: 0 -23px;
  }
  100% {
    background-position: -200px -23px;
  }
}

@keyframes circular-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes circular-dash {
  0% {
    stroke-dasharray: 1px, 200px;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -15px;
  }
  100% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -125px;
  }
}