wenhuayun/app/culture/view/szwjs/assets/sass/scss/_loading.scss

.preloader {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: preloader-spin 1s steps(12, end) infinite;
  animation: preloader-spin 1s steps(12, end) infinite;
  &:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
  }
}

@-webkit-keyframes preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.preloader-box {
  margin: 0.5rem;
  text-align: center;
  padding-top: 2rem;
  .preloader {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.load-qianyin {
  padding-top: 2rem;
  .qiyin-msg {
    margin-top: 2rem;
    font-size: 0.8rem;
  }
}

.ball-pulse > div {
  background-color: $orange;
  border-radius: 100%;
  margin: 2px;
  display: inline-block;
}

.ball-pulse > div {
  width: 15px;
  height: 15px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.ball-pulse > div:nth-child(1) {
  -webkit-animation: scale .75s -.24s infinite cubic-bezier(.2, .68, .18, 1.08);
  animation: scale .75s -.24s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse > div:nth-child(2) {
  -webkit-animation: scale .75s -.12s infinite cubic-bezier(.2, .68, .18, 1.08);
  animation: scale .75s -.12s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse > div:nth-child(3) {
  -webkit-animation: scale .75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
  animation: scale .75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
}

@-webkit-keyframes scale {
  0%, 80% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }

  45% {
    -webkit-transform: scale(.1);
    transform: scale(.1);
    opacity: .7
  }
}

@keyframes scale {
  0%, 80% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }

  45% {
    -webkit-transform: scale(.1);
    transform: scale(.1);
    opacity: .7
  }
}

@-webkit-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}

@keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}

.line-scale-pulse-out > div {
  background-color: $orange;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}

.line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
  -webkit-animation-delay: -0.4s !important;
  animation-delay: -0.4s !important;
}

.line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
  -webkit-animation-delay: -0.2s !important;
  animation-delay: -0.2s !important;
}