You are here

three-bounce.css in Ajax loader 7

Same filename and directory in other branches
  1. 8 css/three-bounce.css
.ajax-throbber.sk-three-bounce {
    width: 80px;
    text-align: center;
}

.ajax-throbber.sk-three-bounce .sk-child {
    width: 20px;
    height: 20px;
    background-color: #333;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
    animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}

.ajax-throbber.sk-three-bounce .sk-bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.ajax-throbber.sk-three-bounce .sk-bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-three-bounce {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-three-bounce {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

File

css/three-bounce.css
View source
  1. .ajax-throbber.sk-three-bounce {
  2. width: 80px;
  3. text-align: center;
  4. }
  5. .ajax-throbber.sk-three-bounce .sk-child {
  6. width: 20px;
  7. height: 20px;
  8. background-color: #333;
  9. border-radius: 100%;
  10. display: inline-block;
  11. -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
  12. animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
  13. }
  14. .ajax-throbber.sk-three-bounce .sk-bounce1 {
  15. -webkit-animation-delay: -0.32s;
  16. animation-delay: -0.32s;
  17. }
  18. .ajax-throbber.sk-three-bounce .sk-bounce2 {
  19. -webkit-animation-delay: -0.16s;
  20. animation-delay: -0.16s;
  21. }
  22. @-webkit-keyframes sk-three-bounce {
  23. 0%, 80%, 100% {
  24. -webkit-transform: scale(0);
  25. transform: scale(0);
  26. }
  27. 40% {
  28. -webkit-transform: scale(1);
  29. transform: scale(1);
  30. }
  31. }
  32. @keyframes sk-three-bounce {
  33. 0%, 80%, 100% {
  34. -webkit-transform: scale(0);
  35. transform: scale(0);
  36. }
  37. 40% {
  38. -webkit-transform: scale(1);
  39. transform: scale(1);
  40. }
  41. }