pico/scss/components/_progress.scss

@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "components/progress") {
  /**
   * Progress
   */

  // Reboot based on :
  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
  // ––––––––––––––––––––

  // 1. Add the correct display in Edge 18- and IE
  // 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
  progress {
    display: inline-block; // 1
    vertical-align: baseline; // 2
  }

  // Pico
  // ––––––––––––––––––––

  progress {
    // Reset the default appearance
    -webkit-appearance: none;
    -moz-appearance: none;

    // Styles
    display: inline-block;
    appearance: none;
    width: 100%;
    height: 0.5rem;
    margin-bottom: calc(var(#{$✨}spacing) * 0.5);
    overflow: hidden;

    // Remove Firefox and Opera border
    border: 0;
    border-radius: var(#{$✨}border-radius);
    background-color: var(#{$✨}progress-background-color);

    // IE10 uses `color` to set the bar background-color
    color: var(#{$✨}progress-color);

    &::-webkit-progress-bar {
      border-radius: var(#{$✨}border-radius);
      background: none;
    }
    &[value]::-webkit-progress-value {
      background-color: var(#{$✨}progress-color);
    }
    &::-moz-progress-bar {
      background-color: var(#{$✨}progress-color);
    }

    // Indeterminate state
    @media (prefers-reduced-motion: no-preference) {
      &:indeterminate {
        background: var(#{$✨}progress-background-color)
          linear-gradient(
            to right,
            var(#{$✨}progress-color) 30%,
            var(#{$✨}progress-background-color) 30%
          )
          top left / 150% 150% no-repeat;
        animation: progress-indeterminate 1s linear infinite;

        &[value]::-webkit-progress-value {
          background-color: transparent;
        }
        &::-moz-progress-bar {
          background-color: transparent;
        }
      }
    }
  }

  [dir="rtl"] {
    @media (prefers-reduced-motion: no-preference) {
      progress:indeterminate {
        animation-direction: reverse;
      }
    }
  }

  @keyframes progress-indeterminate {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}