| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 | @import '../style/var';.van-loading {  position: relative;  color: @loading-spinner-color;  font-size: 0;  vertical-align: middle;  &__spinner {    position: relative;    display: inline-block;    width: @loading-spinner-size;    // compatible for 1.x, users may set width or height in root element    max-width: 100%;    height: @loading-spinner-size;    max-height: 100%;    vertical-align: middle;    animation: van-rotate @loading-spinner-animation-duration linear infinite;    &--spinner {      animation-timing-function: steps(12);      i {        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 100%;        &::before {          display: block;          width: 2px;          height: 25%;          margin: 0 auto;          background-color: currentColor;          border-radius: 40%;          content: ' ';        }      }    }    &--circular {      animation-duration: 2s;    }  }  &__circular {    display: block;    width: 100%;    height: 100%;    circle {      animation: van-circular 1.5s ease-in-out infinite;      stroke: currentColor;      stroke-width: 3;      stroke-linecap: round;    }  }  &__text {    display: inline-block;    margin-left: @padding-xs;    color: @loading-text-color;    font-size: @loading-text-font-size;    vertical-align: middle;  }  &--vertical {    display: flex;    flex-direction: column;    align-items: center;    .van-loading__text {      margin: @padding-xs 0 0;    }  }}@keyframes van-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;  }}.generate-spinner(@n, @i: 1) when (@i =< @n) {  .van-loading__spinner--spinner i:nth-of-type(@{i}) {    transform: rotate(@i * 30deg);    opacity: 1 - (0.75 / 12) * (@i - 1);  }  .generate-spinner(@n, (@i + 1));}.generate-spinner(12);
 |