You are here

wave.css in Ajax loader 7

Same filename and directory in other branches
  1. 8 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%, 40%, 100% {
  36. -webkit-transform: scaleY(0.4);
  37. transform: scaleY(0.4);
  38. }
  39. 20% {
  40. -webkit-transform: scaleY(1);
  41. transform: scaleY(1);
  42. }
  43. }
  44. @keyframes sk-waveStretchDelay {
  45. 0%, 40%, 100% {
  46. -webkit-transform: scaleY(0.4);
  47. transform: scaleY(0.4);
  48. }
  49. 20% {
  50. -webkit-transform: scaleY(1);
  51. transform: scaleY(1);
  52. }
  53. }