dora-ui/lib/spinner/style/index.less

A React.js Mobile UI Library

@spinnerPrefix: dora-spinner;

.@{spinnerPrefix} {
  &__sm {
    transform: scale(0.8);
  }

  &__md {
    transform: scale(1);
  }

  &__lg {
    transform: scale(1.5);
  }

  &__wave {
    @keyframes animation-dora-spinner__wave {
      0%,
      100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }
      50% {
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
      }
    }

    display: flex;
    justify-content: space-between;
    width: 50px;
    height: 38px;

    .@{spinnerPrefix}-rect {
      width: 4px;
      height: 100%;
      background-color: #f86441;
      border-radius: 20px;
      animation: animation-dora-spinner__wave 0.8s linear infinite;
    }

    .@{spinnerPrefix}-rect1 {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }

    .@{spinnerPrefix}-rect2 {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }

    .@{spinnerPrefix}-rect3 {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }
  }

  &__normal {
    @deg: 45deg;

    @keyframes animation-dora-spinner__normal {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    position: relative;
    display: inline-block;
    width: 38px;
    height: 38px;

    & > div {
      transform-origin: 19px 19px;
      animation: animation-dora-spinner__normal 0.8s linear infinite;

      &::after {
        position: absolute;
        top: 2px;
        left: 18px;
        display: block;
        width: 4px;
        height: 8px;
        background: #fff;
        border-radius: 4px;
        content: ' ';
      }

      &:nth-child(1) {
        transform: rotate(@deg * 0);
        animation-delay: -0.7s;
      }
      &:nth-child(2) {
        transform: rotate(@deg * 1);
        animation-delay: -0.6s;
      }
      &:nth-child(3) {
        transform: rotate(@deg * 2);
        animation-delay: -0.5s;
      }
      &:nth-child(4) {
        transform: rotate(@deg * 3);
        animation-delay: -0.4s;
      }

      &:nth-child(5) {
        transform: rotate(@deg * 4);
        animation-delay: -0.3s;
      }
      &:nth-child(6) {
        transform: rotate(@deg * 5);
        animation-delay: -0.2s;
      }
      &:nth-child(7) {
        transform: rotate(@deg * 6);
        animation-delay: -0.1s;
      }
      &:nth-child(8) {
        transform: rotate(@deg * 7);
        animation-delay: 0;
      }
    }
  }
}