naive-ui/styles/BaseLoading.scss

@import './mixins/mixins.scss';

$--base-loading-stroke-dashoffset: 500;

@keyframes n-base-loading-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

@keyframes n-base-loading-dash {
  0% {
    stroke-dashoffset: $--base-loading-stroke-dashoffset;
  }
  50% {
    stroke-dashoffset: $--base-loading-stroke-dashoffset / 4;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: $--base-loading-stroke-dashoffset;
    transform: rotate(450deg);
  }
}

@include themes-mixin {
  @include b(base-loading) {
    @include once {
      line-height: 1;
    }
    @include b(base-loading-circular) {
      @include once {
        height: 100%;
        width: 100%;
        animation: n-base-loading-rotate 1.5s linear infinite;
        transform-origin: center;
      }
      @include b(base-loading-circular-path) {
        stroke: $--base-loading-stroke;
        @include once {
          transform-origin: center;
          transition: stroke .3s $--n-ease-in-out-cubic-bezier;
          animation: n-base-loading-dash 1.5s ease-in-out infinite;
          stroke-dasharray: $--base-loading-stroke-dashoffset;
          stroke-dashoffset: 0;
          stroke-linecap: round;
        }
      }
    }
  }
}