.spinner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 72px;
  height: 72px;
  margin: auto;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }
  .spinner:before, .spinner:after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 50%; }
  .spinner:before {
    width: 64px;
    height: 64px;
    top: 4px;
    /* Must be (totalWidth-width)/2 */
    left: 4px; }
  .spinner:after {
    width: 56px;
    height: 56px;
    top: 8px;
    /* Must be (totalWidth-width)/2 */
    left: 8px; }
  .spinner .side {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute; }
    .spinner .side:before {
      content: '';
      border-radius: 500px;
      position: absolute;
      width: 100%;
      height: 100%;
      background: #156AEB;
      transition: all 0.4s 0.4s linear;
      animation-iteration-count: infinite; }
  .spinner .left {
    left: 0; }
    .spinner .left:before {
      left: 100%;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      transform-origin: 0 50%;
      transition-delay: 0;
      animation-name: color-change, ui-spinner-rotate-left;
      animation-duration: 12s, 3s;
      animation-timing-function: linear, ease-in-out; }
  .spinner .right {
    left: 50%; }
    .spinner .right:before {
      left: -100%;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      transform-origin: 100% 50%;
      animation-name: color-change, ui-spinner-rotate-right;
      animation-duration: 12s, 3s;
      animation-timing-function: linear, ease-in-out; }

@keyframes rotate {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
/**
 * separate each color change by 1% to avoid
 * fading the transition
 */
@keyframes color-change {
  0% {
    background: var(--mdc-theme-primary, blue); }
    /*0% {
        background: #156AEB;
    }

    24% {
        background: #156AEB;
    }

    25% {
        background: #D5432E;
    }

    49% {
        background: #D5432E;
    }

    50% {
        background: #FFB911;
    }

    74% {
        background: #FFB911;
    }

    75% {
        background: #009C58;
    }

    99% {
        background: #009C58;
    }

    100% {
        background: #156AEB;
    }*/ }
@keyframes ui-spinner-rotate-left {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(180deg); }
  75% {
    transform: rotate(180deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes ui-spinner-rotate-right {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(180deg); }
  50% {
    transform: rotate(180deg); }
  75% {
    transform: rotate(360deg); }
  100% {
    transform: rotate(360deg); } }

/*# sourceMappingURL=mdc-spinner.css.map */