spinner_wave.css 1009 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. .sk-spinner-wave {
  2. width: 50px;
  3. height: 50px;
  4. margin: auto;
  5. text-align: center;
  6. font-size: 10px;
  7. }
  8. .sk-spinner-wave div {
  9. background-color: #333;
  10. height: 100%;
  11. width: 6px;
  12. display: inline-block;
  13. animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
  14. }
  15. .sk-spinner-wave .sk-rect2 {
  16. animation-delay: -1.1s;
  17. }
  18. .sk-spinner-wave .sk-rect3 {
  19. animation-delay: -1s;
  20. }
  21. .sk-spinner-wave .sk-rect4 {
  22. animation-delay: -0.9s;
  23. }
  24. .sk-spinner-wave .sk-rect5 {
  25. animation-delay: -0.8s;
  26. }
  27. @-moz-keyframes sk-waveStretchDelay {
  28. 0%, 40%, 100% {
  29. transform: scaleY(0.4);
  30. }
  31. 20% {
  32. transform: scaleY(1);
  33. }
  34. }
  35. @-webkit-keyframes sk-waveStretchDelay {
  36. 0%, 40%, 100% {
  37. transform: scaleY(0.4);
  38. }
  39. 20% {
  40. transform: scaleY(1);
  41. }
  42. }
  43. @-o-keyframes sk-waveStretchDelay {
  44. 0%, 40%, 100% {
  45. transform: scaleY(0.4);
  46. }
  47. 20% {
  48. transform: scaleY(1);
  49. }
  50. }
  51. @keyframes sk-waveStretchDelay {
  52. 0%, 40%, 100% {
  53. transform: scaleY(0.4);
  54. }
  55. 20% {
  56. transform: scaleY(1);
  57. }
  58. }