You are here

Home » API reference » Ajax loader 8

fading-circle.css in Ajax loader 8

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