@meve/ui/es/loading/loading.less

Argon design system components library

@import '../styles/var';

@loading-color: @color-primary;
@loading-description-margin: 10px 0 0 0;
@loading-description-font-size: 14px;
@loading-mask-background: #fff;
@loading-mask-opacity: 0.5;
@loading-size: 36px;
@loading-cubic-bezier: @cubic-bezier;

@keyframes loading-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes circular {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120;
  }
}

.m-loading {
  display: inline-flex;
  position: relative;

  &__circle {
    position: relative;
    z-index: 11;
    display: inline-block;

    svg {
      display: block;
      width: @loading-size;
      height: @loading-size;
      color: @loading-color;

      circle {
        animation: circular 1.5s ease-in-out infinite;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
      }
    }
  }

  &__mask-container {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    transition: opacity 0.25s @loading-cubic-bezier;
    background: @loading-mask-background;
  }

  &__description-container {
    position: relative;
    z-index: 11;
    color: @loading-color;
    font-size: @loading-description-font-size;
  }

  &__description {
    margin-top: 10px;
  }

  &--opacity-hidden {
    opacity: 0;
  }

  &--opacity-visible {
    opacity: @loading-mask-opacity;
  }

  &--allow-touch {
    user-select: none;
    pointer-events: none;
  }

  &--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  &--rotate {
    animation: loading-rotate 1.8s linear infinite;
  }
}