You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

loading5.vue 5.0 KiB

2 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <template>
  2. <view class="container loading6">
  3. <view class="shape shape1"></view>
  4. <view class="shape shape2"></view>
  5. <view class="shape shape3"></view>
  6. <view class="shape shape4"></view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. name: 'loading6',
  12. data() {
  13. return {
  14. };
  15. }
  16. }
  17. </script>
  18. <style scoped="true">
  19. .container {
  20. width: 30px;
  21. height: 30px;
  22. position: relative;
  23. }
  24. .container.loading6 {
  25. -webkit-animation: rotation 1s infinite;
  26. animation: rotation 1s infinite;
  27. }
  28. .container.loading6 .shape {
  29. width: 12px;
  30. height: 12px;
  31. border-radius: 2px;
  32. }
  33. .container .shape {
  34. position: absolute;
  35. width: 10px;
  36. height: 10px;
  37. border-radius: 1px;
  38. }
  39. .container .shape.shape1 {
  40. left: 0;
  41. background-color: #1890FF;
  42. }
  43. .container .shape.shape2 {
  44. right: 0;
  45. background-color: #91CB74;
  46. }
  47. .container .shape.shape3 {
  48. bottom: 0;
  49. background-color: #FAC858;
  50. }
  51. .container .shape.shape4 {
  52. bottom: 0;
  53. right: 0;
  54. background-color: #EE6666;
  55. }
  56. .loading6 .shape1 {
  57. -webkit-animation: animation6shape1 2s linear 0s infinite normal;
  58. animation: animation6shape1 2s linear 0s infinite normal;
  59. }
  60. @-webkit-keyframes animation6shape1 {
  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. @keyframes animation6shape1 {
  79. 0% {
  80. -webkit-transform: translate(0, 0);
  81. transform: translate(0, 0);
  82. }
  83. 25% {
  84. -webkit-transform: translate(0, 18px);
  85. transform: translate(0, 18px);
  86. }
  87. 50% {
  88. -webkit-transform: translate(18px, 18px);
  89. transform: translate(18px, 18px);
  90. }
  91. 75% {
  92. -webkit-transform: translate(18px, 0);
  93. transform: translate(18px, 0);
  94. }
  95. }
  96. .loading6 .shape2 {
  97. -webkit-animation: animation6shape2 2s linear 0s infinite normal;
  98. animation: animation6shape2 2s linear 0s infinite normal;
  99. }
  100. @-webkit-keyframes animation6shape2 {
  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. @keyframes animation6shape2 {
  119. 0% {
  120. -webkit-transform: translate(0, 0);
  121. transform: translate(0, 0);
  122. }
  123. 25% {
  124. -webkit-transform: translate(-18px, 0);
  125. transform: translate(-18px, 0);
  126. }
  127. 50% {
  128. -webkit-transform: translate(-18px, 18px);
  129. transform: translate(-18px, 18px);
  130. }
  131. 75% {
  132. -webkit-transform: translate(0, 18px);
  133. transform: translate(0, 18px);
  134. }
  135. }
  136. .loading6 .shape3 {
  137. -webkit-animation: animation6shape3 2s linear 0s infinite normal;
  138. animation: animation6shape3 2s linear 0s infinite normal;
  139. }
  140. @-webkit-keyframes animation6shape3 {
  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. @keyframes animation6shape3 {
  159. 0% {
  160. -webkit-transform: translate(0, 0);
  161. transform: translate(0, 0);
  162. }
  163. 25% {
  164. -webkit-transform: translate(18px, 0);
  165. transform: translate(18px, 0);
  166. }
  167. 50% {
  168. -webkit-transform: translate(18px, -18px);
  169. transform: translate(18px, -18px);
  170. }
  171. 75% {
  172. -webkit-transform: translate(0, -18px);
  173. transform: translate(0, -18px);
  174. }
  175. }
  176. .loading6 .shape4 {
  177. -webkit-animation: animation6shape4 2s linear 0s infinite normal;
  178. animation: animation6shape4 2s linear 0s infinite normal;
  179. }
  180. @-webkit-keyframes animation6shape4 {
  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. }
  198. @keyframes animation6shape4 {
  199. 0% {
  200. -webkit-transform: translate(0, 0);
  201. transform: translate(0, 0);
  202. }
  203. 25% {
  204. -webkit-transform: translate(0, -18px);
  205. transform: translate(0, -18px);
  206. }
  207. 50% {
  208. -webkit-transform: translate(-18px, -18px);
  209. transform: translate(-18px, -18px);
  210. }
  211. 75% {
  212. -webkit-transform: translate(-18px, 0);
  213. transform: translate(-18px, 0);
  214. }
  215. }
  216. </style>