You are here

Home » API reference » Ajax loader 7

fading-circle.css in Ajax loader 7

Same filename and directory in other branches
  1. 8 css/fading-circle.css
.ajax-throbber.sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.ajax-throbber.sk-fading-circle .sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
    animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

.ajax-throbber.sk-fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.ajax-throbber.sk-fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

.ajax-throbber.sk-fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.ajax-throbber.sk-fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

.ajax-throbber.sk-fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}

.ajax-throbber.sk-fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ajax-throbber.sk-fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}

.ajax-throbber.sk-fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}

.ajax-throbber.sk-fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.ajax-throbber.sk-fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}

.ajax-throbber.sk-fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}

.ajax-throbber.sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.ajax-throbber.sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.ajax-throbber.sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.ajax-throbber.sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.ajax-throbber.sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.ajax-throbber.sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.ajax-throbber.sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.ajax-throbber.sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.ajax-throbber.sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.ajax-throbber.sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.ajax-throbber.sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

File

css/fading-circle.css
View source 
  1. .ajax-throbber.sk-fading-circle .sk-circle {

  2.     width: 100%;

  3.     height: 100%;

  4.     position: absolute;

  5.     left: 0;

  6.     top: 0;

  7. }

  8. 

  9. .ajax-throbber.sk-fading-circle .sk-circle:before {

  10.     content: '';

  11.     display: block;

  12.     margin: 0 auto;

  13.     width: 15%;

  14.     height: 15%;

  15.     background-color: #333;

  16.     border-radius: 100%;

  17.     -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;

  18.     animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;

  19. }

  20. 

  21. .ajax-throbber.sk-fading-circle .sk-circle2 {

  22.     -webkit-transform: rotate(30deg);

  23.     -ms-transform: rotate(30deg);

  24.     transform: rotate(30deg);

  25. }

  26. 

  27. .ajax-throbber.sk-fading-circle .sk-circle3 {

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

  29.     -ms-transform: rotate(60deg);

  30.     transform: rotate(60deg);

  31. }

  32. 

  33. .ajax-throbber.sk-fading-circle .sk-circle4 {

  34.     -webkit-transform: rotate(90deg);

  35.     -ms-transform: rotate(90deg);

  36.     transform: rotate(90deg);

  37. }

  38. 

  39. .ajax-throbber.sk-fading-circle .sk-circle5 {

  40.     -webkit-transform: rotate(120deg);

  41.     -ms-transform: rotate(120deg);

  42.     transform: rotate(120deg);

  43. }

  44. 

  45. .ajax-throbber.sk-fading-circle .sk-circle6 {

  46.     -webkit-transform: rotate(150deg);

  47.     -ms-transform: rotate(150deg);

  48.     transform: rotate(150deg);

  49. }

  50. 

  51. .ajax-throbber.sk-fading-circle .sk-circle7 {

  52.     -webkit-transform: rotate(180deg);

  53.     -ms-transform: rotate(180deg);

  54.     transform: rotate(180deg);

  55. }

  56. 

  57. .ajax-throbber.sk-fading-circle .sk-circle8 {

  58.     -webkit-transform: rotate(210deg);

  59.     -ms-transform: rotate(210deg);

  60.     transform: rotate(210deg);

  61. }

  62. 

  63. .ajax-throbber.sk-fading-circle .sk-circle9 {

  64.     -webkit-transform: rotate(240deg);

  65.     -ms-transform: rotate(240deg);

  66.     transform: rotate(240deg);

  67. }

  68. 

  69. .ajax-throbber.sk-fading-circle .sk-circle10 {

  70.     -webkit-transform: rotate(270deg);

  71.     -ms-transform: rotate(270deg);

  72.     transform: rotate(270deg);

  73. }

  74. 

  75. .ajax-throbber.sk-fading-circle .sk-circle11 {

  76.     -webkit-transform: rotate(300deg);

  77.     -ms-transform: rotate(300deg);

  78.     transform: rotate(300deg);

  79. }

  80. 

  81. .ajax-throbber.sk-fading-circle .sk-circle12 {

  82.     -webkit-transform: rotate(330deg);

  83.     -ms-transform: rotate(330deg);

  84.     transform: rotate(330deg);

  85. }

  86. 

  87. .ajax-throbber.sk-fading-circle .sk-circle2:before {

  88.     -webkit-animation-delay: -1.1s;

  89.     animation-delay: -1.1s;

  90. }

  91. 

  92. .ajax-throbber.sk-fading-circle .sk-circle3:before {

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

  94.     animation-delay: -1s;

  95. }

  96. 

  97. .ajax-throbber.sk-fading-circle .sk-circle4:before {

  98.     -webkit-animation-delay: -0.9s;

  99.     animation-delay: -0.9s;

  100. }

  101. 

  102. .ajax-throbber.sk-fading-circle .sk-circle5:before {

  103.     -webkit-animation-delay: -0.8s;

  104.     animation-delay: -0.8s;

  105. }

  106. 

  107. .ajax-throbber.sk-fading-circle .sk-circle6:before {

  108.     -webkit-animation-delay: -0.7s;

  109.     animation-delay: -0.7s;

  110. }

  111. 

  112. .ajax-throbber.sk-fading-circle .sk-circle7:before {

  113.     -webkit-animation-delay: -0.6s;

  114.     animation-delay: -0.6s;

  115. }

  116. 

  117. .ajax-throbber.sk-fading-circle .sk-circle8:before {

  118.     -webkit-animation-delay: -0.5s;

  119.     animation-delay: -0.5s;

  120. }

  121. 

  122. .ajax-throbber.sk-fading-circle .sk-circle9:before {

  123.     -webkit-animation-delay: -0.4s;

  124.     animation-delay: -0.4s;

  125. }

  126. 

  127. .ajax-throbber.sk-fading-circle .sk-circle10:before {

  128.     -webkit-animation-delay: -0.3s;

  129.     animation-delay: -0.3s;

  130. }

  131. 

  132. .ajax-throbber.sk-fading-circle .sk-circle11:before {

  133.     -webkit-animation-delay: -0.2s;

  134.     animation-delay: -0.2s;

  135. }

  136. 

  137. .ajax-throbber.sk-fading-circle .sk-circle12:before {

  138.     -webkit-animation-delay: -0.1s;

  139.     animation-delay: -0.1s;

  140. }