jimu-mobile/src/styles/jimu-ring.less

积木组件库助力移动端开发

.ring-loading {
  margin: 0px auto;
  width: 120px;
  height: 120px;
  position: relative;
  .progress {
    position: absolute;
    width: 114px;
    height: 114px;
    background: @fill-base;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    line-height: 112px;
    text-align: center;
    color: @color-text-selected;
    font-size: @font-size-caption-sm
  }
  .ring-left,
  .ring-right {
    width: 60px;
    height: 120px;
    overflow: hidden;
    position: relative;
    float: left;
  }
  .ring-left {
    border-radius: 120px 0 0 120px;
  }
  .ring-right {
    border-radius: 0 120px 120px 0;
  }
  .ring-left .left-shadow,
  .ring-right .right-shadow {
    content: "";
    position: absolute;
    display: block;
    width: 60px;
    height: 120px;
    border-radius: 120px 0 0 120px;
    background-color: @color-text-selected;
  }
  .ring-right .right-shadow {
    content: "";
    position: absolute;
    display: block;
    border-radius: 0 120px 120px 0;
  }
  @-webkit-keyframes rotateB {
    0% {
      -webkit-transform: rotateZ(180deg)
    }
    25%,
    50% {
      -webkit-transform: rotateZ(360deg);
    }
    75%,
    100% {
      -webkit-transform: rotateZ(540deg);
    }
  }
  @-webkit-keyframes rotateA {
    0%,
    25% {
      -webkit-transform: rotateZ(180deg);
    }
    50%,
    75% {
      -webkit-transform: rotateZ(360deg);
    }
    100% {
      -webkit-transform: rotateZ(540deg);
    }
  }
  @keyframes rotateB {
    0% {
      transform: rotateZ(180deg)
    }
    25%,
    50% {
      transform: rotateZ(360deg);
    }
    75%,
    100% {
      transform: rotateZ(540deg);
    }
  }
  @keyframes rotateA {
    0%,
    25% {
      transform: rotateZ(180deg);
    }
    50%,
    75% {
      transform: rotateZ(360deg);
    }
    100% {
      transform: rotateZ(540deg);
    }
  }
  .ring-left .left-shadow {
    animation: rotateA 2s infinite linear;
    transform-origin: right center;
    -webkit-animation: rotateA 2s infinite linear;
    -webkit-transform-origin: right center;
  }
  .ring-right .right-shadow {
    animation: rotateB 2s infinite linear;
    transform-origin: left center;
    -webkit-animation: rotateB 2s infinite linear;
    -webkit-transform-origin: left center;
  }
  .ring-ball-circular {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 60;
    -webkit-animation: rotateball 1s infinite linear;
    animation: rotateball 1s infinite linear;
    .ring-ball {
      width: 10px;
      height: 10px;
      border-radius: 100%;
      position: absolute;
      top: -4px;
      left: 50%;
      margin-left: -4px;
      background: #ff8741;
    }
  }
  @-webkit-keyframes rotateball {
    0% {
      -webkit-transform: rotateZ(0deg);
    }
    100% {
      -webkit-transform: rotateZ(360deg);
    }
  }
  @keyframes rotateball {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  .bottom-ring-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    border-radius: 100%;
  }
}