index.less 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. @import '../style/var';
  2. .van-loading {
  3. position: relative;
  4. color: @loading-spinner-color;
  5. font-size: 0;
  6. vertical-align: middle;
  7. &__spinner {
  8. position: relative;
  9. display: inline-block;
  10. width: @loading-spinner-size;
  11. // compatible for 1.x, users may set width or height in root element
  12. max-width: 100%;
  13. height: @loading-spinner-size;
  14. max-height: 100%;
  15. vertical-align: middle;
  16. animation: van-rotate @loading-spinner-animation-duration linear infinite;
  17. &--spinner {
  18. animation-timing-function: steps(12);
  19. i {
  20. position: absolute;
  21. top: 0;
  22. left: 0;
  23. width: 100%;
  24. height: 100%;
  25. &::before {
  26. display: block;
  27. width: 2px;
  28. height: 25%;
  29. margin: 0 auto;
  30. background-color: currentColor;
  31. border-radius: 40%;
  32. content: ' ';
  33. }
  34. }
  35. }
  36. &--circular {
  37. animation-duration: 2s;
  38. }
  39. }
  40. &__circular {
  41. display: block;
  42. width: 100%;
  43. height: 100%;
  44. circle {
  45. animation: van-circular 1.5s ease-in-out infinite;
  46. stroke: currentColor;
  47. stroke-width: 3;
  48. stroke-linecap: round;
  49. }
  50. }
  51. &__text {
  52. display: inline-block;
  53. margin-left: @padding-xs;
  54. color: @loading-text-color;
  55. font-size: @loading-text-font-size;
  56. vertical-align: middle;
  57. }
  58. &--vertical {
  59. display: flex;
  60. flex-direction: column;
  61. align-items: center;
  62. .van-loading__text {
  63. margin: @padding-xs 0 0;
  64. }
  65. }
  66. }
  67. @keyframes van-circular {
  68. 0% {
  69. stroke-dasharray: 1, 200;
  70. stroke-dashoffset: 0;
  71. }
  72. 50% {
  73. stroke-dasharray: 90, 150;
  74. stroke-dashoffset: -40;
  75. }
  76. 100% {
  77. stroke-dasharray: 90, 150;
  78. stroke-dashoffset: -120;
  79. }
  80. }
  81. .generate-spinner(@n, @i: 1) when (@i =< @n) {
  82. .van-loading__spinner--spinner i:nth-of-type(@{i}) {
  83. transform: rotate(@i * 30deg);
  84. opacity: 1 - (0.75 / 12) * (@i - 1);
  85. }
  86. .generate-spinner(@n, (@i + 1));
  87. }
  88. .generate-spinner(12);