lesca-react-loading/src/lib/style.less

simple loading component

.loop(@n, @l:0) when (@l <= @n) {
  &:nth-child(@{l}) {
    transform: rotate(@l*20deg);
    opacity: @l * 0.05;
  }
  .loop(@n,(@l+1));
}

.lesca-loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;

  & > .background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
  }

  @keyframes play {
    100% {
      transform: rotate(360deg);
    }
  }

  & > .content {
    position: absolute;
    top: 50%;
    width: 100%;

    .ico {
      position: absolute;
      left: 50%;
      margin-top: -25px;
      width: 0;
      height: 0;
      animation: play 2s steps(18) infinite;

      & > div {
        position: absolute;
        left: 20px;
        width: 15px;
        height: 2px;
        transform-origin: -20px 0px;

        .loop(18);
      }
    }

    & > .text {
      position: absolute;
      margin-top: 20px;
      width: 100%;
      color: #f8f9fa;
      text-align: center;
    }
  }
}