@universal-material/web/progress/progress-bar.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    --_border-radius: var(--u-progress-bar-border-radius, var(--u-shape-corner-full, 9999px));
    --_height: var(--u-progress-bar-height, 4px);
  }

  :host,
  .determinate,
  .indeterminate {
    overflow: hidden;
    border-radius: var(--_border-radius);
  }

  .determinate,
  .indeterminate {
    display: flex;
    gap: 4px;
  }

  .indeterminate {
    flex: 1;
    margin-inline: -8px;
    border-radius: var(--_border-radius);
  }

  .determinate {
    margin-inline-end: -4px;
  }
  .determinate .bar {
    transition: flex-basis 200ms linear;
  }

  .last {
    flex-shrink: 1;
    flex-basis: 100%;
    animation: last 2.1s infinite linear;
  }

  .slow {
    animation: slow 2.1s infinite linear;
  }

  .middle {
    animation: middle 2.1s infinite linear;
  }

  .fast {
    animation: fast 2.1s infinite linear;
  }

  .first {
    animation: first 2.1s infinite linear;
  }

  .bar {
    height: var(--_height);
    border-radius: var(--_border-radius);
    background: var(--u-progress-bar-color, var(--u-color-primary, rgb(103, 80, 164)));
  }

  .track {
    background: var(--u-progress-bar-track-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
    flex-shrink: 1;
  }

  @keyframes slow {
    0% {
      flex-basis: 0;
    }
    10% {
      flex-basis: 50%;
    }
    20% {
      flex-basis: 100%;
    }
    30% {
      flex-basis: 0;
    }
  }
  @keyframes last {
    0% {
      flex-basis: 100%;
    }
    10% {
      flex-basis: 50%;
    }
    20% {
      flex-basis: 0;
    }
    100% {
      flex-basis: 0;
    }
  }
  @keyframes middle {
    10% {
      flex-basis: 0;
    }
    20% {
      flex-basis: 100%;
    }
    35% {
      flex-basis: 100%;
    }
    45% {
      flex-basis: 0;
    }
  }
  @keyframes fast {
    0% {
      flex-basis: 0;
    }
    25% {
      flex-basis: 0;
    }
    35% {
      flex-basis: 100%;
    }
    45% {
      flex-basis: 100%;
    }
    55% {
      flex-basis: 0;
    }
  }
  @keyframes first {
    35% {
      flex-basis: 0;
    }
    45% {
      flex-basis: 100%;
    }
    100% {
      flex-basis: 100%;
    }
  }
  @keyframes fast-bar-pre {
    0% {
      flex-basis: 0;
    }
    60% {
      flex-basis: 0;
    }
    90% {
      flex-basis: 100%;
    }
    100% {
      flex-basis: 100%;
    }
  }
`;
//# sourceMappingURL=progress-bar.styles.js.map