You are here

three-bounce.css in Ajax loader 8

Same filename and directory in other branches
  1. 7 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%,
  24. 80%,
  25. 100% {
  26. -webkit-transform: scale(0);
  27. transform: scale(0);
  28. }
  29. 40% {
  30. -webkit-transform: scale(1);
  31. transform: scale(1);
  32. }
  33. }
  34. @keyframes sk-three-bounce {
  35. 0%,
  36. 80%,
  37. 100% {
  38. -webkit-transform: scale(0);
  39. transform: scale(0);
  40. }
  41. 40% {
  42. -webkit-transform: scale(1);
  43. transform: scale(1);
  44. }
  45. }