u-loading-icon.wxss 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. @charset "UTF-8";
  2. /* 颜色变量 */
  3. /* 行为相关颜色 */
  4. /* 文字基本颜色 */
  5. /* 背景颜色 */
  6. /* 边框颜色 */
  7. /* 尺寸变量 */
  8. /* 文字尺寸 */
  9. /* 图片尺寸 */
  10. /* Border Radius */
  11. /* 水平间距 */
  12. /* 垂直间距 */
  13. /* 透明度 */
  14. /* 文章场景相关 */
  15. view.data-v-1b800240, scroll-view.data-v-1b800240, swiper-item.data-v-1b800240 {
  16. display: flex;
  17. flex-direction: column;
  18. flex-shrink: 0;
  19. flex-grow: 0;
  20. flex-basis: auto;
  21. align-items: stretch;
  22. align-content: flex-start;
  23. }
  24. .u-loading-icon.data-v-1b800240 {
  25. flex-direction: row;
  26. align-items: center;
  27. justify-content: center;
  28. color: #c8c9cc;
  29. }
  30. .u-loading-icon__text.data-v-1b800240 {
  31. margin-left: 4px;
  32. color: #606266;
  33. font-size: 14px;
  34. line-height: 20px;
  35. }
  36. .u-loading-icon__spinner.data-v-1b800240 {
  37. width: 30px;
  38. height: 30px;
  39. position: relative;
  40. box-sizing: border-box;
  41. max-width: 100%;
  42. max-height: 100%;
  43. -webkit-animation: u-rotate-data-v-1b800240 1s linear infinite;
  44. animation: u-rotate-data-v-1b800240 1s linear infinite;
  45. }
  46. .u-loading-icon__spinner--semicircle.data-v-1b800240 {
  47. border-width: 2px;
  48. border-color: transparent;
  49. border-top-right-radius: 100px;
  50. border-top-left-radius: 100px;
  51. border-bottom-left-radius: 100px;
  52. border-bottom-right-radius: 100px;
  53. border-style: solid;
  54. }
  55. .u-loading-icon__spinner--circle.data-v-1b800240 {
  56. border-top-right-radius: 100px;
  57. border-top-left-radius: 100px;
  58. border-bottom-left-radius: 100px;
  59. border-bottom-right-radius: 100px;
  60. border-width: 2px;
  61. border-top-color: #e5e5e5;
  62. border-right-color: #e5e5e5;
  63. border-bottom-color: #e5e5e5;
  64. border-left-color: #e5e5e5;
  65. border-style: solid;
  66. }
  67. .u-loading-icon--vertical.data-v-1b800240 {
  68. flex-direction: column;
  69. }
  70. .data-v-1b800240:host {
  71. font-size: 0px;
  72. line-height: 1;
  73. }
  74. .u-loading-icon__spinner--spinner.data-v-1b800240 {
  75. -webkit-animation-timing-function: steps(12);
  76. animation-timing-function: steps(12);
  77. }
  78. .u-loading-icon__text.data-v-1b800240:empty {
  79. display: none;
  80. }
  81. .u-loading-icon--vertical .u-loading-icon__text.data-v-1b800240 {
  82. margin: 6px 0 0;
  83. color: #606266;
  84. }
  85. .u-loading-icon__dot.data-v-1b800240 {
  86. position: absolute;
  87. top: 0;
  88. left: 0;
  89. width: 100%;
  90. height: 100%;
  91. }
  92. .u-loading-icon__dot.data-v-1b800240:before {
  93. display: block;
  94. width: 2px;
  95. height: 25%;
  96. margin: 0 auto;
  97. background-color: currentColor;
  98. border-radius: 40%;
  99. content: " ";
  100. }
  101. .u-loading-icon__dot.data-v-1b800240:nth-of-type(1) {
  102. -webkit-transform: rotate(30deg);
  103. transform: rotate(30deg);
  104. opacity: 1;
  105. }
  106. .u-loading-icon__dot.data-v-1b800240:nth-of-type(2) {
  107. -webkit-transform: rotate(60deg);
  108. transform: rotate(60deg);
  109. opacity: 0.9375;
  110. }
  111. .u-loading-icon__dot.data-v-1b800240:nth-of-type(3) {
  112. -webkit-transform: rotate(90deg);
  113. transform: rotate(90deg);
  114. opacity: 0.875;
  115. }
  116. .u-loading-icon__dot.data-v-1b800240:nth-of-type(4) {
  117. -webkit-transform: rotate(120deg);
  118. transform: rotate(120deg);
  119. opacity: 0.8125;
  120. }
  121. .u-loading-icon__dot.data-v-1b800240:nth-of-type(5) {
  122. -webkit-transform: rotate(150deg);
  123. transform: rotate(150deg);
  124. opacity: 0.75;
  125. }
  126. .u-loading-icon__dot.data-v-1b800240:nth-of-type(6) {
  127. -webkit-transform: rotate(180deg);
  128. transform: rotate(180deg);
  129. opacity: 0.6875;
  130. }
  131. .u-loading-icon__dot.data-v-1b800240:nth-of-type(7) {
  132. -webkit-transform: rotate(210deg);
  133. transform: rotate(210deg);
  134. opacity: 0.625;
  135. }
  136. .u-loading-icon__dot.data-v-1b800240:nth-of-type(8) {
  137. -webkit-transform: rotate(240deg);
  138. transform: rotate(240deg);
  139. opacity: 0.5625;
  140. }
  141. .u-loading-icon__dot.data-v-1b800240:nth-of-type(9) {
  142. -webkit-transform: rotate(270deg);
  143. transform: rotate(270deg);
  144. opacity: 0.5;
  145. }
  146. .u-loading-icon__dot.data-v-1b800240:nth-of-type(10) {
  147. -webkit-transform: rotate(300deg);
  148. transform: rotate(300deg);
  149. opacity: 0.4375;
  150. }
  151. .u-loading-icon__dot.data-v-1b800240:nth-of-type(11) {
  152. -webkit-transform: rotate(330deg);
  153. transform: rotate(330deg);
  154. opacity: 0.375;
  155. }
  156. .u-loading-icon__dot.data-v-1b800240:nth-of-type(12) {
  157. -webkit-transform: rotate(360deg);
  158. transform: rotate(360deg);
  159. opacity: 0.3125;
  160. }
  161. @-webkit-keyframes u-rotate-data-v-1b800240 {
  162. 0% {
  163. -webkit-transform: rotate(0deg);
  164. transform: rotate(0deg);
  165. }
  166. to {
  167. -webkit-transform: rotate(1turn);
  168. transform: rotate(1turn);
  169. }
  170. }
  171. @keyframes u-rotate-data-v-1b800240 {
  172. 0% {
  173. -webkit-transform: rotate(0deg);
  174. transform: rotate(0deg);
  175. }
  176. to {
  177. -webkit-transform: rotate(1turn);
  178. transform: rotate(1turn);
  179. }
  180. }