loading.less

// loading
.loading(
    @size,
    @spinner-inside-color,
    @spinner-outside-color,
  ) {
  opacity: 0.8;
  z-index: 999999;

  &:before,
  &:after {
    font-size: (@size*1px);
    box-sizing: border-box;
    content: '';
    position: fixed;
    border-radius: 50%;
    border: solid .6em;
    animation: rotation 1s linear infinite;
  }

  &:after {
    @size-after: 4.8em;
    width: @size-after;
    height: @size-after;
    border-color: @spinner-inside-color;
    border-left-color: transparent;
    top: calc(50% - (@size-after/2));
    left: calc(50% - (@size-after/2));
  }

  &:before {
    @size-before: 2.8em;
    width: @size-before;
    height: @size-before;
    border-color: @spinner-outside-color;
    border-right-color:transparent;
    animation-duration: 2s;
    top: calc(50% - (@size-before/2));
    left: calc(50% - (@size-before/2));
  }
}

@keyframes rotation {
    from { 
      transform: rotate(0);
    }

    to { 
      transform: rotate(359deg);
    }
}

@keyframes blink {
    from { 
      opacity:.5; 
    }
    
    to { 
      opacity: 1; 
    }
}