You are here

Home » API reference » Ajax loader 7

chasing-dots.css in Ajax loader 7

Same filename and directory in other branches
  1. 8 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. 

  7. .ajax-throbber.sk-chasing-dots .sk-child {

  8.     width: 60%;

  9.     height: 60%;

  10.     display: inline-block;

  11.     position: absolute;

  12.     top: 0;

  13.     background-color: #333;

  14.     border-radius: 100%;

  15.     -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;

  16.     animation: sk-chasingDotsBounce 2s infinite ease-in-out;

  17. }

  18. 

  19. .ajax-throbber.sk-chasing-dots .sk-dot2 {

  20.     top: auto;

  21.     bottom: 0;

  22.     -webkit-animation-delay: -1s;

  23.     animation-delay: -1s;

  24. }

  25. 

  26. @-webkit-keyframes sk-chasingDotsRotate {

  27.     100% {

  28.         -webkit-transform: rotate(360deg);

  29.         transform: rotate(360deg);

  30.     }

  31. }

  32. 

  33. @keyframes sk-chasingDotsRotate {

  34.     100% {

  35.         -webkit-transform: rotate(360deg);

  36.         transform: rotate(360deg);

  37.     }

  38. }

  39. 

  40. @-webkit-keyframes sk-chasingDotsBounce {

  41.     0%, 100% {

  42.         -webkit-transform: scale(0);

  43.         transform: scale(0);

  44.     }

  45.     50% {

  46.         -webkit-transform: scale(1);

  47.         transform: scale(1);

  48.     }

  49. }

  50. 

  51. @keyframes sk-chasingDotsBounce {

  52.     0%, 100% {

  53.         -webkit-transform: scale(0);

  54.         transform: scale(0);

  55.     }

  56.     50% {

  57.         -webkit-transform: scale(1);

  58.         transform: scale(1);

  59.     }

  60. }