spinner_dot.css 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. .sk-spinner-dot {
  2. margin: 100px auto;
  3. width: 40px;
  4. height: 40px;
  5. position: relative;
  6. text-align: center;
  7. -webkit-animation: sk-rotate 2s infinite linear;
  8. animation: sk-rotate 2s infinite linear;
  9. }
  10. .sk-dot1,
  11. .sk-dot2 {
  12. width: 40%;
  13. height: 40%;
  14. display: inline-block;
  15. position: absolute;
  16. top: 0;
  17. background-color: #333;
  18. border-radius: 100%;
  19. -webkit-animation: sk-bounce 2s infinite ease-in-out;
  20. animation: sk-bounce 2s infinite ease-in-out;
  21. }
  22. .sk-dot2 {
  23. top: auto;
  24. bottom: 0;
  25. -webkit-animation-delay: -1s;
  26. animation-delay: -1s;
  27. }
  28. @-webkit-keyframes sk-rotate {
  29. 100% {
  30. -webkit-transform: rotate(360deg);
  31. }
  32. }
  33. @-webkit-keyframes sk-bounce {
  34. 0%, 100% {
  35. -webkit-transform: scale(0);
  36. }
  37. 50% {
  38. -webkit-transform: scale(1);
  39. }
  40. }
  41. @-moz-keyframes sk-rotate {
  42. 100% {
  43. transform: rotate(360deg);
  44. -webkit-transform: rotate(360deg);
  45. }
  46. }
  47. @-webkit-keyframes sk-rotate {
  48. 100% {
  49. transform: rotate(360deg);
  50. -webkit-transform: rotate(360deg);
  51. }
  52. }
  53. @-o-keyframes sk-rotate {
  54. 100% {
  55. transform: rotate(360deg);
  56. -webkit-transform: rotate(360deg);
  57. }
  58. }
  59. @keyframes sk-rotate {
  60. 100% {
  61. transform: rotate(360deg);
  62. -webkit-transform: rotate(360deg);
  63. }
  64. }
  65. @-moz-keyframes sk-bounce {
  66. 0%, 100% {
  67. transform: scale(0);
  68. -webkit-transform: scale(0);
  69. }
  70. 50% {
  71. transform: scale(1);
  72. -webkit-transform: scale(1);
  73. }
  74. }
  75. @-webkit-keyframes sk-bounce {
  76. 0%, 100% {
  77. transform: scale(0);
  78. -webkit-transform: scale(0);
  79. }
  80. 50% {
  81. transform: scale(1);
  82. -webkit-transform: scale(1);
  83. }
  84. }
  85. @-o-keyframes sk-bounce {
  86. 0%, 100% {
  87. transform: scale(0);
  88. -webkit-transform: scale(0);
  89. }
  90. 50% {
  91. transform: scale(1);
  92. -webkit-transform: scale(1);
  93. }
  94. }
  95. @keyframes sk-bounce {
  96. 0%, 100% {
  97. transform: scale(0);
  98. -webkit-transform: scale(0);
  99. }
  100. 50% {
  101. transform: scale(1);
  102. -webkit-transform: scale(1);
  103. }
  104. }