You are here

chasing-dots.css in Ajax loader 8

Same filename and directory in other branches
  1. 7 css/chasing-dots.css
.ajax-throbber.sk-chasing-dots {
  text-align: center;
  -webkit-animation: sk-chasingDotsRotate 2s infinite linear;
  animation: sk-chasingDotsRotate 2s infinite linear;
}

.ajax-throbber.sk-chasing-dots .sk-child {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
  animation: sk-chasingDotsBounce 2s infinite ease-in-out;
}

.ajax-throbber.sk-chasing-dots .sk-dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes sk-chasingDotsRotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes sk-chasingDotsRotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes sk-chasingDotsBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-chasingDotsBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

File

css/chasing-dots.css
View source
  1. .ajax-throbber.sk-chasing-dots {
  2. text-align: center;
  3. -webkit-animation: sk-chasingDotsRotate 2s infinite linear;
  4. animation: sk-chasingDotsRotate 2s infinite linear;
  5. }
  6. .ajax-throbber.sk-chasing-dots .sk-child {
  7. width: 60%;
  8. height: 60%;
  9. display: inline-block;
  10. position: absolute;
  11. top: 0;
  12. background-color: #333;
  13. border-radius: 100%;
  14. -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
  15. animation: sk-chasingDotsBounce 2s infinite ease-in-out;
  16. }
  17. .ajax-throbber.sk-chasing-dots .sk-dot2 {
  18. top: auto;
  19. bottom: 0;
  20. -webkit-animation-delay: -1s;
  21. animation-delay: -1s;
  22. }
  23. @-webkit-keyframes sk-chasingDotsRotate {
  24. 100% {
  25. -webkit-transform: rotate(360deg);
  26. transform: rotate(360deg);
  27. }
  28. }
  29. @keyframes sk-chasingDotsRotate {
  30. 100% {
  31. -webkit-transform: rotate(360deg);
  32. transform: rotate(360deg);
  33. }
  34. }
  35. @-webkit-keyframes sk-chasingDotsBounce {
  36. 0%,
  37. 100% {
  38. -webkit-transform: scale(0);
  39. transform: scale(0);
  40. }
  41. 50% {
  42. -webkit-transform: scale(1);
  43. transform: scale(1);
  44. }
  45. }
  46. @keyframes sk-chasingDotsBounce {
  47. 0%,
  48. 100% {
  49. -webkit-transform: scale(0);
  50. transform: scale(0);
  51. }
  52. 50% {
  53. -webkit-transform: scale(1);
  54. transform: scale(1);
  55. }
  56. }