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

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    position: relative;
    display: inline-block;
    width: var(--_size);
    height: var(--_size);
    margin-inline: auto;
    --_size: var(--u-circular-progress-size, 3rem);
  }

  .circular {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    transform-origin: center;
  }
  .circular.indeterminate {
    position: relative;
    animation: rotate 2s linear infinite;
  }
  .circular:not(.indeterminate) .path {
    transition: stroke-dashoffset 200ms linear;
  }

  .path {
    stroke-linecap: round;
    stroke: var(--u-circular-progress-color, var(--u-color-primary, rgb(103, 80, 164)));
  }

  .track {
    position: absolute;
    inset: 0;
  }
  .track .path {
    stroke: var(--u-circular-progress-track-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
  }

  .indeterminate .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
  }

  .on-going {
    transform: rotate(-80deg);
  }
  .on-going.track {
    transform: rotate(-100deg);
  }

  @keyframes rotate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124;
    }
  }
`;
//# sourceMappingURL=circular-progress.styles.js.map