bin-ui/src/styles/components/loading.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

.bin-loading {
  color: #1089ff;
  vertical-align: middle;
  text-align: center;
}

.bin-loading-inner {
  font-size: 14px;
  .circular {
    height: 42px;
    width: 42px;
    animation: loading-rotate 2s linear infinite;
    .path {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: 0;
      stroke-width: 2;
      stroke: #1089ff;
      stroke-linecap: round;
      animation: loading-dash 1.5s ease-in-out infinite;
    }
  }
  .loading-icon {

  }
  .loading-text {
    margin-left:
  }
}

.bin-loading-fix {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 100%, .9);
}
.bin-loading-fix .bin-loading-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}