spinner_double_bounce.css 1.3 KB

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