squoosh/src_old/components/custom-els/LoadingSpinner/styles.css

@keyframes spinner-left-spin {
  from {
    transform: rotate(130deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(130deg);
  }
}

@keyframes spinner-right-spin {
  from {
    transform: rotate(-130deg);
  }
  50% {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(-130deg);
  }
}

@keyframes spinner-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes spinner-container-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner-fill-unfill-rotate {
  12.5% {
    transform: rotate(135deg);
  } /* 0.5 * ARCSIZE */
  25% {
    transform: rotate(270deg);
  } /* 1   * ARCSIZE */
  37.5% {
    transform: rotate(405deg);
  } /* 1.5 * ARCSIZE */
  50% {
    transform: rotate(540deg);
  } /* 2   * ARCSIZE */
  62.5% {
    transform: rotate(675deg);
  } /* 2.5 * ARCSIZE */
  75% {
    transform: rotate(810deg);
  } /* 3   * ARCSIZE */
  87.5% {
    transform: rotate(945deg);
  } /* 3.5 * ARCSIZE */
  to {
    transform: rotate(1080deg);
  } /* 4   * ARCSIZE */
}

loading-spinner {
  --size: 28px;
  --color: #4285f4;
  --stroke-width: 3px;
  --delay: 300ms;

  pointer-events: none;
  display: inline-block;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-color: var(--color);
}

loading-spinner .spinner-circle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  height: 100%;
  width: 200%;
  border-width: var(--stroke-width);
  border-style: solid;
  border-color: inherit;
  border-bottom-color: transparent !important;
  border-radius: 50%;
}

/*
  Patch the gap that appear between the two adjacent div.circle-clipper while the
  spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
*/
loading-spinner .spinner-gap-patch {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 45%;
  width: 10%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

loading-spinner .spinner-gap-patch .spinner-circle {
  width: 1000%;
  left: -450%;
}

loading-spinner .spinner-circle-clipper {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

loading-spinner .spinner-left .spinner-circle {
  border-right-color: transparent !important;
  transform: rotate(129deg);
  animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

loading-spinner .spinner-right .spinner-circle {
  left: -100%;
  border-left-color: transparent !important;
  transform: rotate(-129deg);
  animation: spinner-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite
    both;
}

loading-spinner.spinner-fadeout {
  animation: spinner-fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

loading-spinner .spinner-container {
  width: 100%;
  height: 100%;
  border-color: inherit;

  /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
  animation: spinner-container-rotate 1568ms linear infinite;
}

loading-spinner .spinner-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  border-color: inherit;
  /* durations: 4 * ARCTIME */
  animation: spinner-fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1)
    infinite both;
}