uni-load-more.wxss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. @charset "UTF-8";
  2. .uni-load-more {
  3. display: flex;
  4. flex-direction: row;
  5. height: 80rpx;
  6. align-items: center;
  7. justify-content: center
  8. }
  9. .uni-load-more__text {
  10. font-size: 28rpx;
  11. color: #999
  12. }
  13. .uni-load-more__img {
  14. height: 24px;
  15. width: 24px;
  16. margin-right: 10px
  17. }
  18. .uni-load-more__img>.load {
  19. position: absolute
  20. }
  21. .uni-load-more__img>.load .item {
  22. width: 6px;
  23. height: 2px;
  24. border-top-left-radius: 1px;
  25. border-bottom-left-radius: 1px;
  26. background: #999;
  27. position: absolute;
  28. opacity: .2;
  29. -webkit-transform-origin: 50%;
  30. transform-origin: 50%;
  31. -webkit-animation: load 1.56s ease infinite;
  32. animation: load 1.56s ease infinite
  33. }
  34. .uni-load-more__img>.load .item:nth-child(1) {
  35. -webkit-transform: rotate(90deg);
  36. transform: rotate(90deg);
  37. top: 2px;
  38. left: 9px
  39. }
  40. .uni-load-more__img>.load .item:nth-child(2) {
  41. -webkit-transform: rotate(180deg);
  42. transform: rotate(180deg);
  43. top: 11px;
  44. right: 0
  45. }
  46. .uni-load-more__img>.load .item:nth-child(3) {
  47. -webkit-transform: rotate(270deg);
  48. transform: rotate(270deg);
  49. bottom: 2px;
  50. left: 9px
  51. }
  52. .uni-load-more__img>.load .item:nth-child(4) {
  53. top: 11px;
  54. left: 0
  55. }
  56. .load1,
  57. .load2,
  58. .load3 {
  59. height: 24px;
  60. width: 24px
  61. }
  62. .load2 {
  63. -webkit-transform: rotate(30deg);
  64. transform: rotate(30deg)
  65. }
  66. .load3 {
  67. -webkit-transform: rotate(60deg);
  68. transform: rotate(60deg)
  69. }
  70. .load1 .item:nth-child(1) {
  71. -webkit-animation-delay: 0s;
  72. animation-delay: 0s
  73. }
  74. .load2 .item:nth-child(1) {
  75. -webkit-animation-delay: .13s;
  76. animation-delay: .13s
  77. }
  78. .load3 .item:nth-child(1) {
  79. -webkit-animation-delay: .26s;
  80. animation-delay: .26s
  81. }
  82. .load1 .item:nth-child(2) {
  83. -webkit-animation-delay: .39s;
  84. animation-delay: .39s
  85. }
  86. .load2 .item:nth-child(2) {
  87. -webkit-animation-delay: .52s;
  88. animation-delay: .52s
  89. }
  90. .load3 .item:nth-child(2) {
  91. -webkit-animation-delay: .65s;
  92. animation-delay: .65s
  93. }
  94. .load1 .item:nth-child(3) {
  95. -webkit-animation-delay: .78s;
  96. animation-delay: .78s
  97. }
  98. .load2 .item:nth-child(3) {
  99. -webkit-animation-delay: .91s;
  100. animation-delay: .91s
  101. }
  102. .load3 .item:nth-child(3) {
  103. -webkit-animation-delay: 1.04s;
  104. animation-delay: 1.04s
  105. }
  106. .load1 .item:nth-child(4) {
  107. -webkit-animation-delay: 1.17s;
  108. animation-delay: 1.17s
  109. }
  110. .load2 .item:nth-child(4) {
  111. -webkit-animation-delay: 1.3s;
  112. animation-delay: 1.3s
  113. }
  114. .load3 .item:nth-child(4) {
  115. -webkit-animation-delay: 1.43s;
  116. animation-delay: 1.43s
  117. }
  118. @-webkit-keyframes load {
  119. 0% {
  120. opacity: 1
  121. }
  122. 100% {
  123. opacity: .2
  124. }
  125. }