spinner_bounce.css 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. .sk-spinner-bounce {
  2. margin: 100px auto 0;
  3. width: 70px;
  4. text-align: center;
  5. }
  6. .sk-spinner-bounce div {
  7. width: 18px;
  8. height: 18px;
  9. background-color: #333;
  10. border-radius: 100%;
  11. display: inline-block;
  12. -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  13. animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  14. }
  15. .sk-spinner-bounce .sk-bounce1 {
  16. -webkit-animation-delay: -0.32s;
  17. animation-delay: -0.32s;
  18. }
  19. .sk-spinner-bounce .sk-bounce2 {
  20. -webkit-animation-delay: -0.16s;
  21. animation-delay: -0.16s;
  22. }
  23. @-webkit-keyframes sk-bouncedelay {
  24. 0%, 80%, 100% {
  25. -webkit-transform: scale(0);
  26. }
  27. 40% {
  28. -webkit-transform: scale(1);
  29. }
  30. }
  31. @-moz-keyframes sk-bouncedelay {
  32. 0%, 80%, 100% {
  33. -webkit-transform: scale(0);
  34. transform: scale(0);
  35. }
  36. 40% {
  37. -webkit-transform: scale(1);
  38. transform: scale(1);
  39. }
  40. }
  41. @-webkit-keyframes sk-bouncedelay {
  42. 0%, 80%, 100% {
  43. -webkit-transform: scale(0);
  44. transform: scale(0);
  45. }
  46. 40% {
  47. -webkit-transform: scale(1);
  48. transform: scale(1);
  49. }
  50. }
  51. @-o-keyframes sk-bouncedelay {
  52. 0%, 80%, 100% {
  53. -webkit-transform: scale(0);
  54. transform: scale(0);
  55. }
  56. 40% {
  57. -webkit-transform: scale(1);
  58. transform: scale(1);
  59. }
  60. }
  61. @keyframes sk-bouncedelay {
  62. 0%, 80%, 100% {
  63. -webkit-transform: scale(0);
  64. transform: scale(0);
  65. }
  66. 40% {
  67. -webkit-transform: scale(1);
  68. transform: scale(1);
  69. }
  70. }