loader-animation.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /*!
  2. * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
  3. * Copyright 2015 Daniel Cardoso <@DanielCardoso>
  4. * Licensed under MIT
  5. */
  6. .la-ball-fall,
  7. .la-ball-fall > div {
  8. position: relative;
  9. -webkit-box-sizing: border-box;
  10. -moz-box-sizing: border-box;
  11. box-sizing: border-box;
  12. }
  13. .la-ball-fall {
  14. display: block;
  15. font-size: 0;
  16. color: #fff;
  17. }
  18. .la-ball-fall.la-dark {
  19. color: #333;
  20. }
  21. .la-ball-fall > div {
  22. display: inline-block;
  23. float: none;
  24. background-color: currentColor;
  25. border: 0 solid currentColor;
  26. }
  27. .la-ball-fall {
  28. width: 54px;
  29. height: 18px;
  30. }
  31. .la-ball-fall > div {
  32. width: 10px;
  33. height: 10px;
  34. margin: 4px;
  35. border-radius: 100%;
  36. opacity: 0;
  37. -webkit-animation: ball-fall 1s ease-in-out infinite;
  38. -moz-animation: ball-fall 1s ease-in-out infinite;
  39. -o-animation: ball-fall 1s ease-in-out infinite;
  40. animation: ball-fall 1s ease-in-out infinite;
  41. }
  42. .la-ball-fall > div:nth-child(1) {
  43. -webkit-animation-delay: -200ms;
  44. -moz-animation-delay: -200ms;
  45. -o-animation-delay: -200ms;
  46. animation-delay: -200ms;
  47. }
  48. .la-ball-fall > div:nth-child(2) {
  49. -webkit-animation-delay: -100ms;
  50. -moz-animation-delay: -100ms;
  51. -o-animation-delay: -100ms;
  52. animation-delay: -100ms;
  53. }
  54. .la-ball-fall > div:nth-child(3) {
  55. -webkit-animation-delay: 0ms;
  56. -moz-animation-delay: 0ms;
  57. -o-animation-delay: 0ms;
  58. animation-delay: 0ms;
  59. }
  60. .la-ball-fall.la-sm {
  61. width: 26px;
  62. height: 8px;
  63. }
  64. .la-ball-fall.la-sm > div {
  65. width: 4px;
  66. height: 4px;
  67. margin: 2px;
  68. }
  69. .la-ball-fall.la-2x {
  70. width: 108px;
  71. height: 36px;
  72. }
  73. .la-ball-fall.la-2x > div {
  74. width: 20px;
  75. height: 20px;
  76. margin: 8px;
  77. }
  78. .la-ball-fall.la-3x {
  79. width: 162px;
  80. height: 54px;
  81. }
  82. .la-ball-fall.la-3x > div {
  83. width: 30px;
  84. height: 30px;
  85. margin: 12px;
  86. }
  87. /*
  88. * Animation
  89. */
  90. @-webkit-keyframes ball-fall {
  91. 0% {
  92. opacity: 0;
  93. -webkit-transform: translateY(-145%);
  94. transform: translateY(-145%);
  95. }
  96. 10% {
  97. opacity: .5;
  98. }
  99. 20% {
  100. opacity: 1;
  101. -webkit-transform: translateY(0);
  102. transform: translateY(0);
  103. }
  104. 80% {
  105. opacity: 1;
  106. -webkit-transform: translateY(0);
  107. transform: translateY(0);
  108. }
  109. 90% {
  110. opacity: .5;
  111. }
  112. 100% {
  113. opacity: 0;
  114. -webkit-transform: translateY(145%);
  115. transform: translateY(145%);
  116. }
  117. }
  118. @-moz-keyframes ball-fall {
  119. 0% {
  120. opacity: 0;
  121. -moz-transform: translateY(-145%);
  122. transform: translateY(-145%);
  123. }
  124. 10% {
  125. opacity: .5;
  126. }
  127. 20% {
  128. opacity: 1;
  129. -moz-transform: translateY(0);
  130. transform: translateY(0);
  131. }
  132. 80% {
  133. opacity: 1;
  134. -moz-transform: translateY(0);
  135. transform: translateY(0);
  136. }
  137. 90% {
  138. opacity: .5;
  139. }
  140. 100% {
  141. opacity: 0;
  142. -moz-transform: translateY(145%);
  143. transform: translateY(145%);
  144. }
  145. }
  146. @-o-keyframes ball-fall {
  147. 0% {
  148. opacity: 0;
  149. -o-transform: translateY(-145%);
  150. transform: translateY(-145%);
  151. }
  152. 10% {
  153. opacity: .5;
  154. }
  155. 20% {
  156. opacity: 1;
  157. -o-transform: translateY(0);
  158. transform: translateY(0);
  159. }
  160. 80% {
  161. opacity: 1;
  162. -o-transform: translateY(0);
  163. transform: translateY(0);
  164. }
  165. 90% {
  166. opacity: .5;
  167. }
  168. 100% {
  169. opacity: 0;
  170. -o-transform: translateY(145%);
  171. transform: translateY(145%);
  172. }
  173. }
  174. @keyframes ball-fall {
  175. 0% {
  176. opacity: 0;
  177. -webkit-transform: translateY(-145%);
  178. -moz-transform: translateY(-145%);
  179. -o-transform: translateY(-145%);
  180. transform: translateY(-145%);
  181. }
  182. 10% {
  183. opacity: .5;
  184. }
  185. 20% {
  186. opacity: 1;
  187. -webkit-transform: translateY(0);
  188. -moz-transform: translateY(0);
  189. -o-transform: translateY(0);
  190. transform: translateY(0);
  191. }
  192. 80% {
  193. opacity: 1;
  194. -webkit-transform: translateY(0);
  195. -moz-transform: translateY(0);
  196. -o-transform: translateY(0);
  197. transform: translateY(0);
  198. }
  199. 90% {
  200. opacity: .5;
  201. }
  202. 100% {
  203. opacity: 0;
  204. -webkit-transform: translateY(145%);
  205. -moz-transform: translateY(145%);
  206. -o-transform: translateY(145%);
  207. transform: translateY(145%);
  208. }
  209. }