acud/es/loading/style/index.css

acg react 组件库

/* color */
/* 默认颜色 */
/* 通用-icon */
/* 标签 */
/* 默认颜色 */
/* 其他颜色 */
/* 通用 */
/* 水平 */
/* 垂直 */
/* 序号水平 */
/* 序号垂直 */
.acud-loading-loading-wrapper {
  position: relative;
}
.acud-loading-children {
  filter: blur(1px);
}
.acud-loading-loading-context {
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #2468F2;
  background-color: rgba(255, 255, 255, 0.9);
}
.acud-loading-zIndex {
  z-index: 9;
}
.acud-loading-bottom {
  flex-direction: column;
}
.acud-loading-default {
  background-size: cover;
  width: 48px;
  height: 48px;
}
.acud-loading-lg {
  width: 64px;
  height: 64px;
}
.acud-loading-sm {
  width: 32px;
  height: 32px;
}
.acud-loading-tip {
  margin-top: 12px;
}
.acud-loading-tip-right {
  margin-left: 12px;
  margin-top: 0;
}
.acud-loading-begin {
  fill: #2468f2;
  stroke: #2468f2;
}
.acud-loading-begin .circle1 {
  animation: circle1 1.8s ease infinite;
}
.acud-loading-begin .circle2 {
  animation: circle2 1.8s ease infinite;
}
.acud-loading-begin .circle3 {
  animation: circle3 1.8s ease infinite;
}
.acud-loading-begin .circle4 {
  animation: circle4 1.8s ease infinite;
}
.acud-loading-begin .circle5 {
  animation: circle5 1.8s ease infinite;
}
.acud-loading-begin .circle6 {
  animation: circle6 1.8s ease infinite;
}
.acud-loading-begin .frame {
  stroke-dashoffset: 900;
  stroke-dasharray: 900 2440;
  animation: frame 1.8s ease infinite;
}
@keyframes circle1 {
  0% {
    transform: translate3d(0%, 40%, 0);
  }
  30% {
    transform: translate3d(0%, 0%, 0);
  }
  70% {
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    transform: translate3d(0%, 40%, 0);
  }
}
@keyframes circle2 {
  0% {
    transform: translate3d(-35%, 20%, 0);
  }
  30% {
    transform: translate3d(0%, 0%, 0);
  }
  70% {
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    transform: translate3d(-35%, 20%, 0);
  }
}
@keyframes circle3 {
  0% {
    transform: translate3d(-35%, -20%, 0);
  }
  30% {
    transform: translate3d(0%, 0%, 0);
  }
  70% {
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    transform: translate3d(-35%, -20%, 0);
  }
}
@keyframes circle4 {
  0% {
    transform: translate3d(0%, -40%, 0);
  }
  30% {
    transform: translate3d(0%, 0%, 0);
  }
  70% {
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    transform: translate3d(0%, -40%, 0);
  }
}
@keyframes circle5 {
  0% {
    transform: translate3d(35%, -20%, 0);
  }
  30% {
    transform: translate3d(0%, 0%, 0);
  }
  70% {
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    transform: translate3d(35%, -20%, 0);
  }
}
@keyframes circle6 {
  0% {
    transform: translate3d(35%, 20%, 0);
  }
  30% {
    transform: translate3d(0%, 0%, 0);
  }
  70% {
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    transform: translate3d(35%, 20%, 0);
  }
}
@keyframes frame {
  24.99% {
    stroke-dashoffset: 900;
  }
  25% {
    stroke-dashoffset: 900;
  }
  75% {
    stroke-dashoffset: -2440;
  }
  75.01% {
    stroke-dashoffset: 900;
  }
}