rsuite/Loader/styles/index.less

A suite of react components

@import '../../styles/common';
@import 'mixin';

.rs-loader {
  .clearfix();
  .loader-size(@loader-default-diameter, @loader-default-content-font-size);

  display: inline-block;

  //Loader spin
  &-spin {
    position: relative;
    display: inline-block;
    float: left;

    .loader-spin();
  }

  //Loader spin
  &-content {
    float: left;
    display: inline-block;
  }

  &-spin + &-content {
    margin-left: @loader-content-spin-spacing-horizontal;

    //Extra small size loader spacing is smaller.
    .rs-loader-xs & {
      margin-left: @loader-content-spin-spacing-horizontal-xs;
    }
  }

  // Backdrop
  &-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rs-loader-backdrop);
  }

  // Vertical
  &-vertical {
    width: auto;
    display: inline-block;

    .rs-loader {
      flex-direction: column;
    }

    .rs-loader-spin {
      margin: 0 auto;
    }

    .rs-loader-content {
      line-height: unit((@line-height-computed / @loader-default-content-font-size));
      text-align: center;
    }

    .rs-loader-spin,
    .rs-loader-content {
      display: block;
      float: none;
    }

    .rs-loader-spin + .rs-loader-content {
      margin-left: 0;
      margin-top: @loader-content-spin-spacing-vertical;
    }
  }

  // inverse
  &-inverse {
    .rs-loader-content {
      color: var(--rs-text-inverse);
    }

    .rs-loader-backdrop {
      background: var(--rs-loader-backdrop-inverse);
    }

    .rs-loader-spin::before {
      border-color: var(--rs-loader-ring-inverse);
    }

    .rs-loader-spin::after {
      border-top-color: var(--rs-loader-rotor-inverse);
    }
  }

  // Loader speeds
  &-speed-fast &-spin::after {
    animation-duration: @loader-duration-fast;
  }

  &-speed-normal &-spin::after {
    animation-duration: @loader-duration-normal;
  }

  &-speed-slow &-spin::after {
    animation-duration: @loader-duration-slow;
  }

  &-speed-paused &-spin::after {
    animation-play-state: @loader-duration-paused;
  }

  // Position center
  &-center,
  &-backdrop-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;

    .rs-loader {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    // horizontal loader need set display table to set width auto
    &:not(.rs-loader-vertical) {
      .rs-loader {
        display: flex;
      }
    }

    // vertical content text align center
    &.rs-loader-vertical {
      .rs-loader {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }

    .rs-loader-content {
      z-index: 1;
    }
  }

  //Sizes
  &-lg {
    .loader-size(@loader-lg-diameter, @loader-lg-content-font-size);
  }

  &-md {
    .loader-size(@loader-md-diameter, @loader-md-content-font-size);
  }

  &-sm {
    .loader-size(@loader-sm-diameter, @loader-sm-content-font-size);
  }

  &-xs {
    .loader-size(@loader-xs-diameter, @loader-xs-content-font-size);
  }
}

// Set loader width auto
.rs-loader-wrapper {
  display: inline-block;
  width: auto;
  // Clear white space
  line-height: 0;
}

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

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