css 多色旋转器

Posted 2021-05-13

.spinner-outer {
  position: relative;
  width: 18vh;
  height: 18vh;
  border: solid #eee 3px;
  border-radius: 50%;
}

.spinner {
    position: absolute;
    width: 18vh;
    height: 18vh;
    top: 0;
    left: 0;
    border-radius: 50%;
    box-shadow: 0 0.6vh 0.6vh #0c2340;
    -ms-animation: uil-ring-anim 1s linear infinite;
    -moz-animation: uil-ring-anim 1s linear infinite;
    -webkit-animation: uil-ring-anim 1s linear infinite;
    -o-animation: uil-ring-anim 1s linear infinite;
    animation: uil-ring-anim 1s linear infinite;
}

.reverse {
  animation: uil-ring-anim-rev 1s linear infinite;
  box-shadow: 0 0.6vh 0.6vh orange;
}

.green {
  animation: uil-ring-anim-green 1s linear infinite;
  box-shadow: 0 0.6vh 0.6vh green;
}

.teal {
  animation: uil-ring-anim-teal 1s linear infinite;
  box-shadow: 0 0.6vh 0.6vh teal;
}

@keyframes uil-ring-anim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes uil-ring-anim-rev {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(-270deg);
  }
}

@keyframes uil-ring-anim-green {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(540deg);
  }
}

@keyframes uil-ring-anim-teal {
  0% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}