ssj_curator/templates/loading/loading.wxss

/* templates/loading/loading.wxss */
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.loading-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-box {
  background: rgba(255,255,255,1);
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(194,194,194,0.5);
  border-radius: 10rpx;
  padding: 8rpx 4rpx;
  position: relative;
}
.loading-line {
  width: 138rpx;
  height: 16rpx;
  background: #eee;
  border-radius: 100rpx;
  margin: 30rpx;
  position: relative;
}
.loading-line:nth-last-of-type(1) {
  width: 80rpx;
}
.loading-line-len {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #ccc;
  border-radius: 100rpx;
}
.line-0 {
  animation: line0 3s infinite ease-in-out;
}
.line-1 {
  animation: line1 3s infinite ease-in-out;
}
.line-2 {
  animation: line2 3s infinite ease-in-out;
}
.line-3 {
  animation: line3 3s infinite ease-in-out;
}
.loading-pencil {
  position: absolute;
  top: 30rpx;
  left: 34rpx;
  width: 133rpx;
  height: 157rpx;
  animation: pencil 3s infinite 0s ease-in-out;
}
@keyframes line0 {
  0% {
    width: 0%;
  }
  25%, 100% {
    width: 100%;
  }
}
@keyframes line1 {
  0%, 25% {
    width: 0%;
  }
  50%, 100% {
    width: 100%;
  }
}
@keyframes line2 {
  0%, 50% {
    width: 0%;
  }
  75%, 100% {
    width: 100%;
  }
}
@keyframes line3 {
  0%, 75% {
    width: 0%;
  }
  85%, 100% {
    width: 100%;
  }
}
@keyframes pencil {
  0%, 100% {
    top: 30rpx;
    left: 34rpx;
    transform: rotate(0);
  }
  20% {
    top: 30rpx;
    left: 138rpx;
  }
  25% {
    top: 76rpx;
    left: 34rpx;
  }
  45% {
    top: 76rpx;
    left: 138rpx;
  }
  50% {
    top: 122rpx;
    left: 34rpx;
  }
  70% {
    top: 122rpx;
    left: 138rpx;
  }
  75% {
    top: 168rpx;
    left: 34rpx;
  }
  85% {
    top: 168rpx;
    left: 80rpx;
  }
  86% {
    top: 76rpx;
    left: 200rpx;
    transform: rotate(0);
  }
  90%, 95% {
    top: 76rpx;
    left: 200rpx;
    transform: rotate(40deg);
  }
}
/* .loading-card {
  background: rgba(255,255,255,1);
  box-shadow: 0px 4rpx 20rpx 0px rgba(187,199,191,0.5);
  border-radius: 18rpx;
  margin: 20rpx auto;
  padding: 1rpx;
}
.loading-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20rpx;
}
.loading-card-flex {
  flex: 1;
}
.loading-card-circle {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50rpx;
  margin: 20rpx 20rpx 20rpx 0;
}
.loading-card-rect {
  flex: 1;
  height: 50rpx;
  margin: 20rpx 0;
}
.loading-card-rect-short {
  width: 150rpx;
  height: 50rpx;
  margin: 20rpx 0;
}
.loading-card-rect-length {
  width: 300rpx;
  height: 50rpx;
  margin: 20rpx 0;
}
.loading-card-circle-large {
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;
  margin: 20rpx 20rpx 20rpx 0;
}
.loading-card-row:nth-of-type(odd) .loading-card-circle,
.loading-card-row:nth-of-type(odd) .loading-card-circle-large,
.loading-card-row:nth-of-type(odd) .loading-card-rect,
.loading-card-row:nth-of-type(odd) .loading-card-rect-short,
.loading-card-row:nth-of-type(odd) .loading-card-rect-length
{
  animation: loading 1s infinite ease-in-out;
}
.loading-card-row:nth-of-type(even) .loading-card-circle,
.loading-card-row:nth-of-type(even) .loading-card-circle-large,
.loading-card-row:nth-of-type(even) .loading-card-rect,
.loading-card-row:nth-of-type(even) .loading-card-rect-short,
.loading-card-row:nth-of-type(even) .loading-card-rect-length
{
  animation: loading 2s infinite ease-in-out;
}
@keyframes loading {
  0%, 100% {
    background: #e0e0e0;
  }
  50% {
    background: #efefef;
  }
} */
/* .loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loading-img {
  margin: 50rpx auto;
  width: 60%;
  position: relative;
}
.loading-img::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6rpx;
  width: 10%;
  background: #999;
  border-radius: 20rpx;
  animation: line 2s infinite ease-in-out;
}
.loading-img image {
  width: 162rpx;
  height: 171rpx;
  animation: loading 2s infinite ease-in-out;
}
.loading-text {
  color: #666;
}
@keyframes loading {
  10% {
    transform: translateX(10%)
  }
  50% {
    transform: translateX(250%)
  }
  70% {
    transform: translateX(250%) rotate(180deg)
  }
  90% {
    transform: translateX(10%) rotate(180deg)
  }
  100% {
    transform: translateX(10%) rotate(0deg)
  }
} 

@keyframes line {
  10% {
    width: 10%;
  }
  50%, 70% {
    width: 98%;
  }
  90%, 100% {
    width: 10%;
  }
}  */