shineout/css/Spin/styles/four-dots.css

Shein 前端组件库

.so-four-dots {
  position: relative;
  margin: auto;
  -webkit-animation: so-four-dots-rotate 1.6s infinite linear;
          animation: so-four-dots-rotate 1.6s infinite linear;
}
@-webkit-keyframes so-four-dots-rotate {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(359deg);
            transform: rotateZ(359deg);
  }
}
@keyframes so-four-dots-rotate {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(359deg);
            transform: rotateZ(359deg);
  }
}
@-webkit-keyframes so-four-dots-fade {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes so-four-dots-fade {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.2;
  }
}
.so-four-dots-item {
  position: absolute;
  width: 32%;
  height: 32%;
  -webkit-animation: so-four-dots-fade 1.6s linear infinite;
          animation: so-four-dots-fade 1.6s linear infinite;
  line-height: 0;
  opacity: 0.2;
}
.so-four-dots-item div {
  border-radius: 100%;
}
.so-four-dots-item:nth-child(1) {
  top: 10%;
  left: 10%;
}
.so-four-dots-item:nth-child(2) {
  top: 10%;
  right: 10%;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.so-four-dots-item:nth-child(3) {
  right: 10%;
  bottom: 10%;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.so-four-dots-item:nth-child(4) {
  bottom: 10%;
  left: 10%;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}