index.wxss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. @import '../common/index.wxss';
  2. .van-loading {
  3. z-index: 0;
  4. line-height: 0;
  5. position: relative;
  6. display: inline-block;
  7. vertical-align: middle;
  8. }
  9. .van-loading__spinner {
  10. z-index: -1;
  11. width: 100%;
  12. height: 100%;
  13. position: relative;
  14. display: inline-block;
  15. box-sizing: border-box;
  16. -webkit-animation: van-rotate .8s linear infinite;
  17. animation: van-rotate .8s linear infinite
  18. }
  19. .van-loading__spinner--spinner {
  20. -webkit-animation-timing-function: steps(12);
  21. animation-timing-function: steps(12)
  22. }
  23. .van-loading__spinner--circular {
  24. border: 1px solid;
  25. border-radius: 100%;
  26. border-color: transparent;
  27. border-top-color: currentColor
  28. }
  29. .van-loading__dot {
  30. top: 0;
  31. left: 0;
  32. width: 100%;
  33. height: 100%;
  34. position: absolute
  35. }
  36. .van-loading__dot::before {
  37. width: 2px;
  38. height: 25%;
  39. content: ' ';
  40. display: block;
  41. margin: 0 auto;
  42. border-radius: 40%;
  43. background-color: currentColor
  44. }
  45. .van-loading__dot:nth-of-type(1) {
  46. opacity: 1;
  47. -webkit-transform: rotate(30deg);
  48. transform: rotate(30deg)
  49. }
  50. .van-loading__dot:nth-of-type(2) {
  51. opacity: .9375;
  52. -webkit-transform: rotate(60deg);
  53. transform: rotate(60deg)
  54. }
  55. .van-loading__dot:nth-of-type(3) {
  56. opacity: .875;
  57. -webkit-transform: rotate(90deg);
  58. transform: rotate(90deg)
  59. }
  60. .van-loading__dot:nth-of-type(4) {
  61. opacity: .8125;
  62. -webkit-transform: rotate(120deg);
  63. transform: rotate(120deg)
  64. }
  65. .van-loading__dot:nth-of-type(5) {
  66. opacity: .75;
  67. -webkit-transform: rotate(150deg);
  68. transform: rotate(150deg)
  69. }
  70. .van-loading__dot:nth-of-type(6) {
  71. opacity: .6875;
  72. -webkit-transform: rotate(180deg);
  73. transform: rotate(180deg)
  74. }
  75. .van-loading__dot:nth-of-type(7) {
  76. opacity: .625;
  77. -webkit-transform: rotate(210deg);
  78. transform: rotate(210deg)
  79. }
  80. .van-loading__dot:nth-of-type(8) {
  81. opacity: .5625;
  82. -webkit-transform: rotate(240deg);
  83. transform: rotate(240deg)
  84. }
  85. .van-loading__dot:nth-of-type(9) {
  86. opacity: .5;
  87. -webkit-transform: rotate(270deg);
  88. transform: rotate(270deg)
  89. }
  90. .van-loading__dot:nth-of-type(10) {
  91. opacity: .4375;
  92. -webkit-transform: rotate(300deg);
  93. transform: rotate(300deg)
  94. }
  95. .van-loading__dot:nth-of-type(11) {
  96. opacity: .375;
  97. -webkit-transform: rotate(330deg);
  98. transform: rotate(330deg)
  99. }
  100. .van-loading__dot:nth-of-type(12) {
  101. opacity: .3125;
  102. -webkit-transform: rotate(360deg);
  103. transform: rotate(360deg)
  104. }
  105. @-webkit-keyframes van-rotate {
  106. from {
  107. -webkit-transform: rotate(0);
  108. transform: rotate(0)
  109. }
  110. to {
  111. -webkit-transform: rotate(360deg);
  112. transform: rotate(360deg)
  113. }
  114. }
  115. @keyframes van-rotate {
  116. from {
  117. -webkit-transform: rotate(0);
  118. transform: rotate(0)
  119. }
  120. to {
  121. -webkit-transform: rotate(360deg);
  122. transform: rotate(360deg)
  123. }
  124. }