index.acss 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. .loading-index {
  2. display: block;
  3. height: initial;
  4. }
  5. @import "../common/index.acss";
  6. .loading-index {
  7. font-size: 0;
  8. line-height: 1;
  9. }
  10. .loading-index .van-loading {
  11. display: -webkit-inline-flex;
  12. display: inline-flex;
  13. -webkit-align-items: center;
  14. align-items: center;
  15. -webkit-justify-content: center;
  16. justify-content: center;
  17. color: #c8c9cc;
  18. color: var(--loading-spinner-color, #c8c9cc);
  19. }
  20. .loading-index .van-loading__spinner {
  21. position: relative;
  22. box-sizing: border-box;
  23. width: 30px;
  24. width: var(--loading-spinner-size, 30px);
  25. max-width: 100%;
  26. max-height: 100%;
  27. height: 30px;
  28. height: var(--loading-spinner-size, 30px);
  29. -webkit-animation: van-rotate 0.8s linear infinite;
  30. animation: van-rotate 0.8s linear infinite;
  31. -webkit-animation: van-rotate
  32. var(--loading-spinner-animation-duration, 0.8s) linear infinite;
  33. animation: van-rotate var(--loading-spinner-animation-duration, 0.8s) linear
  34. infinite;
  35. }
  36. .loading-index .van-loading__spinner--spinner {
  37. -webkit-animation-timing-function: steps(12);
  38. animation-timing-function: steps(12);
  39. }
  40. .loading-index .van-loading__spinner--circular {
  41. border: 1px solid transparent;
  42. border-top-color: initial;
  43. border-radius: 100%;
  44. }
  45. .loading-index .van-loading__text {
  46. margin-left: 8px;
  47. margin-left: var(--padding-xs, 8px);
  48. color: #969799;
  49. color: var(--loading-text-color, #969799);
  50. font-size: 14px;
  51. font-size: var(--loading-text-font-size, 14px);
  52. line-height: 20px;
  53. line-height: var(--loading-text-line-height, 20px);
  54. }
  55. .loading-index .van-loading__text:empty {
  56. display: none;
  57. }
  58. .loading-index .van-loading--vertical {
  59. -webkit-flex-direction: column;
  60. flex-direction: column;
  61. }
  62. .loading-index .van-loading--vertical .van-loading__text {
  63. margin: 8px 0 0;
  64. margin: var(--padding-xs, 8px) 0 0;
  65. }
  66. .loading-index .van-loading__dot {
  67. position: absolute;
  68. top: 0;
  69. left: 0;
  70. width: 100%;
  71. height: 100%;
  72. }
  73. .loading-index .van-loading__dot:before {
  74. display: block;
  75. width: 2px;
  76. height: 25%;
  77. margin: 0 auto;
  78. background-color: currentColor;
  79. border-radius: 40%;
  80. content: " ";
  81. }
  82. .loading-index .van-loading__dot:first-of-type {
  83. -webkit-transform: rotate(30deg);
  84. transform: rotate(30deg);
  85. opacity: 1;
  86. }
  87. .loading-index .van-loading__dot:nth-of-type(2) {
  88. -webkit-transform: rotate(60deg);
  89. transform: rotate(60deg);
  90. opacity: 0.9375;
  91. }
  92. .loading-index .van-loading__dot:nth-of-type(3) {
  93. -webkit-transform: rotate(90deg);
  94. transform: rotate(90deg);
  95. opacity: 0.875;
  96. }
  97. .loading-index .van-loading__dot:nth-of-type(4) {
  98. -webkit-transform: rotate(120deg);
  99. transform: rotate(120deg);
  100. opacity: 0.8125;
  101. }
  102. .loading-index .van-loading__dot:nth-of-type(5) {
  103. -webkit-transform: rotate(150deg);
  104. transform: rotate(150deg);
  105. opacity: 0.75;
  106. }
  107. .loading-index .van-loading__dot:nth-of-type(6) {
  108. -webkit-transform: rotate(180deg);
  109. transform: rotate(180deg);
  110. opacity: 0.6875;
  111. }
  112. .loading-index .van-loading__dot:nth-of-type(7) {
  113. -webkit-transform: rotate(210deg);
  114. transform: rotate(210deg);
  115. opacity: 0.625;
  116. }
  117. .loading-index .van-loading__dot:nth-of-type(8) {
  118. -webkit-transform: rotate(240deg);
  119. transform: rotate(240deg);
  120. opacity: 0.5625;
  121. }
  122. .loading-index .van-loading__dot:nth-of-type(9) {
  123. -webkit-transform: rotate(270deg);
  124. transform: rotate(270deg);
  125. opacity: 0.5;
  126. }
  127. .loading-index .van-loading__dot:nth-of-type(10) {
  128. -webkit-transform: rotate(300deg);
  129. transform: rotate(300deg);
  130. opacity: 0.4375;
  131. }
  132. .loading-index .van-loading__dot:nth-of-type(11) {
  133. -webkit-transform: rotate(330deg);
  134. transform: rotate(330deg);
  135. opacity: 0.375;
  136. }
  137. .loading-index .van-loading__dot:nth-of-type(12) {
  138. -webkit-transform: rotate(1turn);
  139. transform: rotate(1turn);
  140. opacity: 0.3125;
  141. }
  142. @-webkit-keyframes van-rotate {
  143. 0% {
  144. -webkit-transform: rotate(0deg);
  145. transform: rotate(0deg);
  146. }
  147. to {
  148. -webkit-transform: rotate(1turn);
  149. transform: rotate(1turn);
  150. }
  151. }
  152. @keyframes van-rotate {
  153. 0% {
  154. -webkit-transform: rotate(0deg);
  155. transform: rotate(0deg);
  156. }
  157. to {
  158. -webkit-transform: rotate(1turn);
  159. transform: rotate(1turn);
  160. }
  161. }