@perfma/heaven/es/loading/simple.less

An UI Framework base [Ant Design V4](https://ant.design/components/overview-cn/) for React.

@import '~antd/es/spin/style/index.less';
@import '../style/vars.less';

.heaven-loading-simple {
  &-default {
    width: 90px;
  }
  &-small {
    width: 64px;
  }
  &-large {
    width: 144px;
  }
  height: auto;
  margin: 0 !important;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  position: relative;

  .heaven-loading-simple-body {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 0.5em;
    animation: simple_loading 1s infinite linear;

    &-item {
      width: 1em;
      height: 1em;
      border-radius: 50% 50% 50% 0;

      &:first-child {
        animation: simple_loading1 1s infinite linear;
      }

      &:nth-child(2) {
        animation: simple_loading2 1s infinite linear;
      }

      &:nth-child(3) {
        animation: simple_loading3 1s infinite linear;
      }

      &:last-child {
        animation: simple_loading4 1s infinite linear;
        margin-right: 0;
      }
    }

    @keyframes simple_loading {
      0% {
        margin-left: -1em;
      }

      50% {
        margin-left: 0.5em;
      }

      100% {
        margin-left: 0.5em;
      }
    }

    @keyframes simple_loading1 {
      0% {
        background-color: color(~`colorPalette('@{primary-color}', 2) `);
        transform: scale(0.2);
      }

      50% {
        background-color: color(~`colorPalette('@{primary-color}', 3) `);
        transform: scale(0.7);
      }

      100% {
        background-color: color(~`colorPalette('@{primary-color}', 3) `);
        transform: scale(0.7);
      }
    }

    @keyframes simple_loading2 {
      0% {
        background-color: color(~`colorPalette('@{primary-color}', 3) `);
        transform: scale(0.7);
      }

      50% {
        background-color: @primary-color;
        transform: scale(1);
      }

      100% {
        background-color: @primary-color;
        transform: scale(1);
      }
    }

    @keyframes simple_loading3 {
      0% {
        background-color: @primary-color;
        transform: scale(1);
      }

      50% {
        background-color: color(~`colorPalette('@{primary-color}', 3) `);
        transform: scale(0.7);
      }

      100% {
        background-color: color(~`colorPalette('@{primary-color}', 3) `);
        transform: scale(0.7);
      }
    }

    @keyframes simple_loading4 {
      0% {
        background-color: color(~`colorPalette('@{primary-color}', 3) `);
        transform: scale(0.7);
      }

      50% {
        background-color: color(~`colorPalette('@{primary-color}', 2) `);
        transform: scale(0.2);
      }

      100% {
        background-color: color(~`colorPalette('@{primary-color}', 2) `);
        transform: scale(0.2);
      }
    }
  }
}