shineout/css/Spin/styles/chasing-ring.css

Shein 前端组件库

.so-chasing-ring {
  position: relative;
  margin: auto;
}
@-webkit-keyframes so-chasing-ring-loading {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes so-chasing-ring-loading {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@-webkit-keyframes so-chasing-ring-loading1 {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  44% {
    -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes so-chasing-ring-loading1 {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  44% {
    -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@-webkit-keyframes so-chasing-ring-loading2 {
  0% {
    -webkit-transform: rotateZ(75deg);
            transform: rotateZ(75deg);
  }
  44% {
    -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
  }
  100% {
    -webkit-transform: rotateZ(435deg);
            transform: rotateZ(435deg);
  }
}
@keyframes so-chasing-ring-loading2 {
  0% {
    -webkit-transform: rotateZ(75deg);
            transform: rotateZ(75deg);
  }
  44% {
    -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
  }
  100% {
    -webkit-transform: rotateZ(435deg);
            transform: rotateZ(435deg);
  }
}
@-webkit-keyframes so-chasing-ring-loading3 {
  0% {
    -webkit-transform: rotateZ(150deg);
            transform: rotateZ(150deg);
  }
  44% {
    -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
  }
  100% {
    -webkit-transform: rotateZ(510deg);
            transform: rotateZ(510deg);
  }
}
@keyframes so-chasing-ring-loading3 {
  0% {
    -webkit-transform: rotateZ(150deg);
            transform: rotateZ(150deg);
  }
  44% {
    -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
  }
  100% {
    -webkit-transform: rotateZ(510deg);
            transform: rotateZ(510deg);
  }
}
@-webkit-keyframes so-chasing-ring-loading4 {
  0% {
    -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
  }
  44% {
    -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
  }
  100% {
    -webkit-transform: rotateZ(585deg);
            transform: rotateZ(585deg);
  }
}
@keyframes so-chasing-ring-loading4 {
  0% {
    -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
  }
  44% {
    -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
  }
  100% {
    -webkit-transform: rotateZ(585deg);
            transform: rotateZ(585deg);
  }
}
.so-chasing-ring-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: solid 1px transparent;
  border-radius: 100%;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.so-chasing-ring-item:nth-child(1) {
  -webkit-animation: so-chasing-ring-loading1 2s infinite;
          animation: so-chasing-ring-loading1 2s infinite;
}
.so-chasing-ring-item:nth-child(2) {
  -webkit-animation: so-chasing-ring-loading2 2s infinite;
          animation: so-chasing-ring-loading2 2s infinite;
}
.so-chasing-ring-item:nth-child(3) {
  -webkit-animation: so-chasing-ring-loading3 2s infinite;
          animation: so-chasing-ring-loading3 2s infinite;
}
.so-chasing-ring-item:nth-child(4) {
  -webkit-animation: so-chasing-ring-loading4 2s infinite;
          animation: so-chasing-ring-loading4 2s infinite;
}