loading5.wxss 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. .container.data-v-e476ade6 {
  2. width: 30px;
  3. height: 30px;
  4. position: relative;
  5. }
  6. .container.loading6.data-v-e476ade6 {
  7. -webkit-animation: rotation 1s infinite;
  8. animation: rotation 1s infinite;
  9. }
  10. .container.loading6 .shape.data-v-e476ade6 {
  11. width: 12px;
  12. height: 12px;
  13. border-radius: 2px;
  14. }
  15. .container .shape.data-v-e476ade6 {
  16. position: absolute;
  17. width: 10px;
  18. height: 10px;
  19. border-radius: 1px;
  20. }
  21. .container .shape.shape1.data-v-e476ade6 {
  22. left: 0;
  23. background-color: #1890FF;
  24. }
  25. .container .shape.shape2.data-v-e476ade6 {
  26. right: 0;
  27. background-color: #91CB74;
  28. }
  29. .container .shape.shape3.data-v-e476ade6 {
  30. bottom: 0;
  31. background-color: #FAC858;
  32. }
  33. .container .shape.shape4.data-v-e476ade6 {
  34. bottom: 0;
  35. right: 0;
  36. background-color: #EE6666;
  37. }
  38. .loading6 .shape1.data-v-e476ade6 {
  39. -webkit-animation: animation6shape1-data-v-e476ade6 2s linear 0s infinite normal;
  40. animation: animation6shape1-data-v-e476ade6 2s linear 0s infinite normal;
  41. }
  42. @-webkit-keyframes animation6shape1-data-v-e476ade6 {
  43. 0% {
  44. -webkit-transform: translate(0, 0);
  45. transform: translate(0, 0);
  46. }
  47. 25% {
  48. -webkit-transform: translate(0, 18px);
  49. transform: translate(0, 18px);
  50. }
  51. 50% {
  52. -webkit-transform: translate(18px, 18px);
  53. transform: translate(18px, 18px);
  54. }
  55. 75% {
  56. -webkit-transform: translate(18px, 0);
  57. transform: translate(18px, 0);
  58. }
  59. }
  60. @keyframes animation6shape1-data-v-e476ade6 {
  61. 0% {
  62. -webkit-transform: translate(0, 0);
  63. transform: translate(0, 0);
  64. }
  65. 25% {
  66. -webkit-transform: translate(0, 18px);
  67. transform: translate(0, 18px);
  68. }
  69. 50% {
  70. -webkit-transform: translate(18px, 18px);
  71. transform: translate(18px, 18px);
  72. }
  73. 75% {
  74. -webkit-transform: translate(18px, 0);
  75. transform: translate(18px, 0);
  76. }
  77. }
  78. .loading6 .shape2.data-v-e476ade6 {
  79. -webkit-animation: animation6shape2-data-v-e476ade6 2s linear 0s infinite normal;
  80. animation: animation6shape2-data-v-e476ade6 2s linear 0s infinite normal;
  81. }
  82. @-webkit-keyframes animation6shape2-data-v-e476ade6 {
  83. 0% {
  84. -webkit-transform: translate(0, 0);
  85. transform: translate(0, 0);
  86. }
  87. 25% {
  88. -webkit-transform: translate(-18px, 0);
  89. transform: translate(-18px, 0);
  90. }
  91. 50% {
  92. -webkit-transform: translate(-18px, 18px);
  93. transform: translate(-18px, 18px);
  94. }
  95. 75% {
  96. -webkit-transform: translate(0, 18px);
  97. transform: translate(0, 18px);
  98. }
  99. }
  100. @keyframes animation6shape2-data-v-e476ade6 {
  101. 0% {
  102. -webkit-transform: translate(0, 0);
  103. transform: translate(0, 0);
  104. }
  105. 25% {
  106. -webkit-transform: translate(-18px, 0);
  107. transform: translate(-18px, 0);
  108. }
  109. 50% {
  110. -webkit-transform: translate(-18px, 18px);
  111. transform: translate(-18px, 18px);
  112. }
  113. 75% {
  114. -webkit-transform: translate(0, 18px);
  115. transform: translate(0, 18px);
  116. }
  117. }
  118. .loading6 .shape3.data-v-e476ade6 {
  119. -webkit-animation: animation6shape3-data-v-e476ade6 2s linear 0s infinite normal;
  120. animation: animation6shape3-data-v-e476ade6 2s linear 0s infinite normal;
  121. }
  122. @-webkit-keyframes animation6shape3-data-v-e476ade6 {
  123. 0% {
  124. -webkit-transform: translate(0, 0);
  125. transform: translate(0, 0);
  126. }
  127. 25% {
  128. -webkit-transform: translate(18px, 0);
  129. transform: translate(18px, 0);
  130. }
  131. 50% {
  132. -webkit-transform: translate(18px, -18px);
  133. transform: translate(18px, -18px);
  134. }
  135. 75% {
  136. -webkit-transform: translate(0, -18px);
  137. transform: translate(0, -18px);
  138. }
  139. }
  140. @keyframes animation6shape3-data-v-e476ade6 {
  141. 0% {
  142. -webkit-transform: translate(0, 0);
  143. transform: translate(0, 0);
  144. }
  145. 25% {
  146. -webkit-transform: translate(18px, 0);
  147. transform: translate(18px, 0);
  148. }
  149. 50% {
  150. -webkit-transform: translate(18px, -18px);
  151. transform: translate(18px, -18px);
  152. }
  153. 75% {
  154. -webkit-transform: translate(0, -18px);
  155. transform: translate(0, -18px);
  156. }
  157. }
  158. .loading6 .shape4.data-v-e476ade6 {
  159. -webkit-animation: animation6shape4-data-v-e476ade6 2s linear 0s infinite normal;
  160. animation: animation6shape4-data-v-e476ade6 2s linear 0s infinite normal;
  161. }
  162. @-webkit-keyframes animation6shape4-data-v-e476ade6 {
  163. 0% {
  164. -webkit-transform: translate(0, 0);
  165. transform: translate(0, 0);
  166. }
  167. 25% {
  168. -webkit-transform: translate(0, -18px);
  169. transform: translate(0, -18px);
  170. }
  171. 50% {
  172. -webkit-transform: translate(-18px, -18px);
  173. transform: translate(-18px, -18px);
  174. }
  175. 75% {
  176. -webkit-transform: translate(-18px, 0);
  177. transform: translate(-18px, 0);
  178. }
  179. }
  180. @keyframes animation6shape4-data-v-e476ade6 {
  181. 0% {
  182. -webkit-transform: translate(0, 0);
  183. transform: translate(0, 0);
  184. }
  185. 25% {
  186. -webkit-transform: translate(0, -18px);
  187. transform: translate(0, -18px);
  188. }
  189. 50% {
  190. -webkit-transform: translate(-18px, -18px);
  191. transform: translate(-18px, -18px);
  192. }
  193. 75% {
  194. -webkit-transform: translate(-18px, 0);
  195. transform: translate(-18px, 0);
  196. }
  197. }