index.css 3.8 KB

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