You are here

wave.css in Ajax loader 8

Same filename and directory in other branches
  1. 7 css/wave.css
.ajax-throbber.sk-wave {
  width: 50px;
  text-align: center;
  font-size: 10px;
}

.ajax-throbber.sk-wave .sk-rect {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
  animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}

.ajax-throbber.sk-wave .sk-rect1 {
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.ajax-throbber.sk-wave .sk-rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.ajax-throbber.sk-wave .sk-rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.ajax-throbber.sk-wave .sk-rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.ajax-throbber.sk-wave .sk-rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-waveStretchDelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes sk-waveStretchDelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

File

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