ball-spin-fade-loader.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. @-webkit-keyframes ball-spin-fade-loader {
  2. 50% {
  3. opacity : 0.3;
  4. -webkit-transform : scale(0.4);
  5. transform : scale(0.4);
  6. }
  7. 100% {
  8. opacity : 1;
  9. -webkit-transform : scale(1);
  10. transform : scale(1);
  11. }
  12. }
  13. @-moz-keyframes ball-spin-fade-loader {
  14. 50% {
  15. opacity : 0.3;
  16. -moz-transform : scale(0.4);
  17. transform : scale(0.4);
  18. }
  19. 100% {
  20. opacity : 1;
  21. -moz-transform : scale(1);
  22. transform : scale(1);
  23. }
  24. }
  25. @-o-keyframes ball-spin-fade-loader {
  26. 50% {
  27. opacity : 0.3;
  28. -o-transform : scale(0.4);
  29. transform : scale(0.4);
  30. }
  31. 100% {
  32. opacity : 1;
  33. -o-transform : scale(1);
  34. transform : scale(1);
  35. }
  36. }
  37. @keyframes ball-spin-fade-loader {
  38. 50% {
  39. opacity : 0.3;
  40. -webkit-transform : scale(0.4);
  41. -moz-transform : scale(0.4);
  42. -o-transform : scale(0.4);
  43. transform : scale(0.4);
  44. }
  45. 100% {
  46. opacity : 1;
  47. -webkit-transform : scale(1);
  48. -moz-transform : scale(1);
  49. -o-transform : scale(1);
  50. transform : scale(1);
  51. }
  52. }
  53. .ball-spin-fade-loader {
  54. position : relative;
  55. top : -10px;
  56. right : -10px;
  57. }
  58. .ball-spin-fade-loader > div:nth-child(1) {
  59. top : 25px;
  60. right : 0;
  61. -webkit-animation : ball-spin-fade-loader 1s -0.96s infinite linear;
  62. -moz-animation : ball-spin-fade-loader 1s -0.96s infinite linear;
  63. -o-animation : ball-spin-fade-loader 1s -0.96s infinite linear;
  64. animation : ball-spin-fade-loader 1s -0.96s infinite linear;
  65. }
  66. .ball-spin-fade-loader > div:nth-child(2) {
  67. top : 17.04545px;
  68. right : 17.04545px;
  69. -webkit-animation : ball-spin-fade-loader 1s -0.84s infinite linear;
  70. -moz-animation : ball-spin-fade-loader 1s -0.84s infinite linear;
  71. -o-animation : ball-spin-fade-loader 1s -0.84s infinite linear;
  72. animation : ball-spin-fade-loader 1s -0.84s infinite linear;
  73. }
  74. .ball-spin-fade-loader > div:nth-child(3) {
  75. top : 0;
  76. right : 25px;
  77. -webkit-animation : ball-spin-fade-loader 1s -0.72s infinite linear;
  78. -moz-animation : ball-spin-fade-loader 1s -0.72s infinite linear;
  79. -o-animation : ball-spin-fade-loader 1s -0.72s infinite linear;
  80. animation : ball-spin-fade-loader 1s -0.72s infinite linear;
  81. }
  82. .ball-spin-fade-loader > div:nth-child(4) {
  83. top : -17.04545px;
  84. right : 17.04545px;
  85. -webkit-animation : ball-spin-fade-loader 1s -0.6s infinite linear;
  86. -moz-animation : ball-spin-fade-loader 1s -0.6s infinite linear;
  87. -o-animation : ball-spin-fade-loader 1s -0.6s infinite linear;
  88. animation : ball-spin-fade-loader 1s -0.6s infinite linear;
  89. }
  90. .ball-spin-fade-loader > div:nth-child(5) {
  91. top : -25px;
  92. right : 0;
  93. -webkit-animation : ball-spin-fade-loader 1s -0.48s infinite linear;
  94. -moz-animation : ball-spin-fade-loader 1s -0.48s infinite linear;
  95. -o-animation : ball-spin-fade-loader 1s -0.48s infinite linear;
  96. animation : ball-spin-fade-loader 1s -0.48s infinite linear;
  97. }
  98. .ball-spin-fade-loader > div:nth-child(6) {
  99. top : -17.04545px;
  100. right : -17.04545px;
  101. -webkit-animation : ball-spin-fade-loader 1s -0.36s infinite linear;
  102. -moz-animation : ball-spin-fade-loader 1s -0.36s infinite linear;
  103. -o-animation : ball-spin-fade-loader 1s -0.36s infinite linear;
  104. animation : ball-spin-fade-loader 1s -0.36s infinite linear;
  105. }
  106. .ball-spin-fade-loader > div:nth-child(7) {
  107. top : 0;
  108. right : -25px;
  109. -webkit-animation : ball-spin-fade-loader 1s -0.24s infinite linear;
  110. -moz-animation : ball-spin-fade-loader 1s -0.24s infinite linear;
  111. -o-animation : ball-spin-fade-loader 1s -0.24s infinite linear;
  112. animation : ball-spin-fade-loader 1s -0.24s infinite linear;
  113. }
  114. .ball-spin-fade-loader > div:nth-child(8) {
  115. top : 17.04545px;
  116. right : -17.04545px;
  117. -webkit-animation : ball-spin-fade-loader 1s -0.12s infinite linear;
  118. -moz-animation : ball-spin-fade-loader 1s -0.12s infinite linear;
  119. -o-animation : ball-spin-fade-loader 1s -0.12s infinite linear;
  120. animation : ball-spin-fade-loader 1s -0.12s infinite linear;
  121. }
  122. .ball-spin-fade-loader > div {
  123. background-color : #55595C;
  124. width : 15px;
  125. height : 15px;
  126. border-radius : 100%;
  127. margin : 2px;
  128. -webkit-animation-fill-mode : both;
  129. -moz-animation-fill-mode : both;
  130. -o-animation-fill-mode : both;
  131. animation-fill-mode : both;
  132. position : absolute;
  133. }