spinner_scaleout.css 1.2 KB

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