Issue #3300800 by mvogel: Updating SpinKit CSS Library (071e8ac9) · Commits · project / ajax_loader

css/chasing-dots.css

+50 −47

Original line number	Diff line number	Diff line
		.ajax-throbber.sk-chasing-dots {
		text-align: center;
		-webkit-animation: sk-chasingDotsRotate 2s infinite linear;
		animation: sk-chasingDotsRotate 2s infinite linear;
		/* Chase

		<div class="sk-chase">
		<div class="sk-chase-dot"></div>
		<div class="sk-chase-dot"></div>
		<div class="sk-chase-dot"></div>
		<div class="sk-chase-dot"></div>
		<div class="sk-chase-dot"></div>
		<div class="sk-chase-dot"></div>
		</div>
		*/
		.ajax-throbber.sk-chase {
		width: var(--sk-size);
		height: var(--sk-size);
		position: relative;
		animation: sk-chase 2.5s infinite linear both;
		}

		.ajax-throbber.sk-chasing-dots .sk-child {
		width: 60%;
		height: 60%;
		display: inline-block;
		.ajax-throbber .sk-chase-dot {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		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;
		animation: sk-chase-dot 2.0s infinite ease-in-out both;
		}

		.ajax-throbber.sk-chasing-dots .sk-dot2 {
		top: auto;
		bottom: 0;
		-webkit-animation-delay: -1s;
		animation-delay: -1s;
		.ajax-throbber .sk-chase-dot:before {
		content: '';
		display: block;
		width: 25%;
		height: 25%;
		background-color: var(--sk-color);
		border-radius: 100%;
		animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
		}

		@-webkit-keyframes sk-chasingDotsRotate {
		100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		}
		}
		.ajax-throbber .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
		.ajax-throbber .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
		.ajax-throbber .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
		.ajax-throbber .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
		.ajax-throbber .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
		.ajax-throbber .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
		.ajax-throbber .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
		.ajax-throbber .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
		.ajax-throbber .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
		.ajax-throbber .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
		.ajax-throbber .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
		.ajax-throbber .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

		@keyframes sk-chasingDotsRotate {
		100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		}
		@keyframes sk-chase {
		100% { 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-chase-dot {
		80%, 100% { transform: rotate(360deg); }
		}

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

css/circle.css

+55 −150

Original line number	Diff line number	Diff line
		.ajax-throbber.sk-circle .sk-child {
		/* Circle

		<div class="sk-circle">
		<div class="sk-circle-dot"></div>
		<div class="sk-circle-dot"></div>
		<div class="sk-circle-dot"></div>
		<div class="sk-circle-dot"></div>
		<div class="sk-circle-dot"></div>
		<div class="sk-circle-dot"></div>
		<div class="sk-circle-dot"></div>
		<div class="sk-circle-dot"></div>
		<div class="sk-circle-dot"></div>
		<div class="sk-circle-dot"></div>
		<div class="sk-circle-dot"></div>
		<div class="sk-circle-dot"></div>
		</div>
		*/
		.ajax-throbber.sk-circle {
		width: var(--sk-size);
		height: var(--sk-size);
		position: relative;
		}

		.ajax-throbber .sk-circle-dot {
		width: 100%;
		height: 100%;
		position: absolute;
		@@ -6,161 +29,43 @@
		top: 0;
		}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

		@-webkit-keyframes sk-circleBounceDelay {
		0%,
		80%,
		100% {
		-webkit-transform: scale(0);
		transform: scale(0);
		}
		40% {
		-webkit-transform: scale(1);
		transform: scale(1);
		}
		}

		@keyframes sk-circleBounceDelay {
		0%,
		80%,
		100% {
		-webkit-transform: scale(0);
		transform: scale(0);
		}
		animation: sk-circle 1.2s infinite ease-in-out both;
		}

		.ajax-throbber .sk-circle-dot:nth-child(1) { transform: rotate(30deg); }
		.ajax-throbber .sk-circle-dot:nth-child(2) { transform: rotate(60deg); }
		.ajax-throbber .sk-circle-dot:nth-child(3) { transform: rotate(90deg); }
		.ajax-throbber .sk-circle-dot:nth-child(4) { transform: rotate(120deg); }
		.ajax-throbber .sk-circle-dot:nth-child(5) { transform: rotate(150deg); }
		.ajax-throbber .sk-circle-dot:nth-child(6) { transform: rotate(180deg); }
		.ajax-throbber .sk-circle-dot:nth-child(7) { transform: rotate(210deg); }
		.ajax-throbber .sk-circle-dot:nth-child(8) { transform: rotate(240deg); }
		.ajax-throbber .sk-circle-dot:nth-child(9) { transform: rotate(270deg); }
		.ajax-throbber .sk-circle-dot:nth-child(10) { transform: rotate(300deg); }
		.ajax-throbber .sk-circle-dot:nth-child(11) { transform: rotate(330deg); }
		.ajax-throbber .sk-circle-dot:nth-child(1):before { animation-delay: -1.1s; }
		.ajax-throbber .sk-circle-dot:nth-child(2):before { animation-delay: -1s; }
		.ajax-throbber .sk-circle-dot:nth-child(3):before { animation-delay: -0.9s; }
		.ajax-throbber .sk-circle-dot:nth-child(4):before { animation-delay: -0.8s; }
		.ajax-throbber .sk-circle-dot:nth-child(5):before { animation-delay: -0.7s; }
		.ajax-throbber .sk-circle-dot:nth-child(6):before { animation-delay: -0.6s; }
		.ajax-throbber .sk-circle-dot:nth-child(7):before { animation-delay: -0.5s; }
		.ajax-throbber .sk-circle-dot:nth-child(8):before { animation-delay: -0.4s; }
		.ajax-throbber .sk-circle-dot:nth-child(9):before { animation-delay: -0.3s; }
		.ajax-throbber .sk-circle-dot:nth-child(10):before { animation-delay: -0.2s; }
		.ajax-throbber .sk-circle-dot:nth-child(11):before { animation-delay: -0.1s; }

		@keyframes sk-circle {
		0%, 80%, 100% {
		transform: scale(0); }
		40% {
		-webkit-transform: scale(1);
		transform: scale(1);
		}
		}

css/cube-grid.css

+40 −75

Original line number	Diff line number	Diff line
		.ajax-throbber.sk-cube-grid {
		position: inherit;
		}

		.ajax-throbber.sk-cube-grid .sk-cube {
		/* Grid

		<div class="sk-grid">
		<div class="sk-grid-cube"></div>
		<div class="sk-grid-cube"></div>
		<div class="sk-grid-cube"></div>
		<div class="sk-grid-cube"></div>
		<div class="sk-grid-cube"></div>
		<div class="sk-grid-cube"></div>
		<div class="sk-grid-cube"></div>
		<div class="sk-grid-cube"></div>
		<div class="sk-grid-cube"></div>
		</div>
		*/
		.ajax-progress.sk-grid {
		width: var(--sk-size);
		height: var(--sk-size);
		/* Cube positions
		* 1 2 3
		* 4 5 6
		* 7 8 9
		*/
		}
		.ajax-throbber .sk-grid-cube {
		width: 33.33%;
		height: 33.33%;
		background-color: #333;
		background-color: var(--sk-color);
		float: left;
		-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
		animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
		}

		.ajax-throbber.sk-cube-grid .sk-cube1 {
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
		}

		.ajax-throbber.sk-cube-grid .sk-cube2 {
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
		}

		.ajax-throbber.sk-cube-grid .sk-cube3 {
		-webkit-animation-delay: 0.4s;
		animation-delay: 0.4s;
		}

		.ajax-throbber.sk-cube-grid .sk-cube4 {
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
		}

		.ajax-throbber.sk-cube-grid .sk-cube5 {
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
		}

		.ajax-throbber.sk-cube-grid .sk-cube6 {
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
		}

		.ajax-throbber.sk-cube-grid .sk-cube7 {
		-webkit-animation-delay: 0.0s;
		animation-delay: 0.0s;
		animation: sk-grid 1.3s infinite ease-in-out;
		}

		.ajax-throbber.sk-cube-grid .sk-cube8 {
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
		}
		.ajax-throbber .sk-grid-cube:nth-child(1) { animation-delay: 0.2s; }
		.ajax-throbber .sk-grid-cube:nth-child(2) { animation-delay: 0.3s; }
		.ajax-throbber .sk-grid-cube:nth-child(3) { animation-delay: 0.4s; }
		.ajax-throbber .sk-grid-cube:nth-child(4) { animation-delay: 0.1s; }
		.ajax-throbber .sk-grid-cube:nth-child(5) { animation-delay: 0.2s; }
		.ajax-throbber .sk-grid-cube:nth-child(6) { animation-delay: 0.3s; }
		.ajax-throbber .sk-grid-cube:nth-child(7) { animation-delay: 0.0s; }
		.ajax-throbber .sk-grid-cube:nth-child(8) { animation-delay: 0.1s; }
		.ajax-throbber .sk-grid-cube:nth-child(9) { animation-delay: 0.2s; }

		.ajax-throbber.sk-cube-grid .sk-cube9 {
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
		}

		@-webkit-keyframes sk-cubeGridScaleDelay {
		0%,
		70%,
		100% {
		-webkit-transform: scale3D(1, 1, 1);
		@keyframes sk-grid {
		0%, 70%, 100% {
		transform: scale3D(1, 1, 1);
		}
		35% {
		-webkit-transform: scale3D(0, 0, 1);
		transform: scale3D(0, 0, 1);
		}
		}

		@keyframes sk-cubeGridScaleDelay {
		0%,
		70%,
		100% {
		-webkit-transform: scale3D(1, 1, 1);
		transform: scale3D(1, 1, 1);
		}
		35% {
		-webkit-transform: scale3D(0, 0, 1);
		} 35% {
		transform: scale3D(0, 0, 1);
		}
		}

css/double-bounce.css

+23 −27

Original line number	Diff line number	Diff line
		.ajax-throbber.sk-double-bounce .sk-child {
		/* Bounce

		<div class="sk-bounce">
		<div class="sk-bounce-dot"></div>
		<div class="sk-bounce-dot"></div>
		</div>
		*/
		.ajax-throbber.sk-bounce {
		width: var(--sk-size);
		height: var(--sk-size);
		position: relative;
		}

		.ajax-throbber .sk-bounce-dot {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #333;
		background-color: var(--sk-color);
		opacity: 0.6;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
		animation: sk-doubleBounce 2s infinite ease-in-out;
		}
		.ajax-throbber.sk-double-bounce .sk-double-bounce2 {
		-webkit-animation-delay: -1.0s;
		animation-delay: -1.0s;
		animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}

		@-webkit-keyframes sk-doubleBounce {
		0%,
		100% {
		-webkit-transform: scale(0);
		transform: scale(0);
		}
		50% {
		-webkit-transform: scale(1);
		transform: scale(1);
		} }
		.ajax-throbber .sk-bounce-dot:nth-child(2) { animation-delay: -1.0s; }

		@keyframes sk-doubleBounce {
		0%,
		100% {
		-webkit-transform: scale(0);
		@keyframes sk-bounce {
		0%, 100% {
		transform: scale(0);
		}
		50% {
		-webkit-transform: scale(1);
		} 45%, 55% {
		transform: scale(1);
		} }
		}
		}

css/fading-circle.css

+60 −127

Original line number	Diff line number	Diff line
		.ajax-throbber.sk-fading-circle .sk-circle {
		/* Circle Fade

		<div class="sk-circle-fade">
		<div class="sk-circle-fade-dot"></div>
		<div class="sk-circle-fade-dot"></div>
		<div class="sk-circle-fade-dot"></div>
		<div class="sk-circle-fade-dot"></div>
		<div class="sk-circle-fade-dot"></div>
		<div class="sk-circle-fade-dot"></div>
		<div class="sk-circle-fade-dot"></div>
		<div class="sk-circle-fade-dot"></div>
		<div class="sk-circle-fade-dot"></div>
		<div class="sk-circle-fade-dot"></div>
		<div class="sk-circle-fade-dot"></div>
		<div class="sk-circle-fade-dot"></div>
		</div>
		*/
		.ajax-throbber.sk-circle-fade {
		width: var(--sk-size);
		height: var(--sk-size);
		position: relative;
		}

		.ajax-throbber .sk-circle-fade-dot {
		width: 100%;
		height: 100%;
		position: absolute;
		@@ -6,135 +29,45 @@
		top: 0;
		}

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

		.ajax-throbber .sk-circle-fade-dot:nth-child(1) { transform: rotate(30deg); }
		.ajax-throbber .sk-circle-fade-dot:nth-child(2) { transform: rotate(60deg); }
		.ajax-throbber .sk-circle-fade-dot:nth-child(3) { transform: rotate(90deg); }
		.ajax-throbber .sk-circle-fade-dot:nth-child(4) { transform: rotate(120deg); }
		.ajax-throbber .sk-circle-fade-dot:nth-child(5) { transform: rotate(150deg); }
		.ajax-throbber .sk-circle-fade-dot:nth-child(6) { transform: rotate(180deg); }
		.ajax-throbber .sk-circle-fade-dot:nth-child(7) { transform: rotate(210deg); }
		.ajax-throbber .sk-circle-fade-dot:nth-child(8) { transform: rotate(240deg); }
		.ajax-throbber .sk-circle-fade-dot:nth-child(9) { transform: rotate(270deg); }
		.ajax-throbber .sk-circle-fade-dot:nth-child(10) { transform: rotate(300deg); }
		.ajax-throbber .sk-circle-fade-dot:nth-child(11) { transform: rotate(330deg); }
		.ajax-throbber .sk-circle-fade-dot:nth-child(1):before { animation-delay: -1.1s; }
		.ajax-throbber .sk-circle-fade-dot:nth-child(2):before { animation-delay: -1.0s; }
		.ajax-throbber .sk-circle-fade-dot:nth-child(3):before { animation-delay: -0.9s; }
		.ajax-throbber .sk-circle-fade-dot:nth-child(4):before { animation-delay: -0.8s; }
		.ajax-throbber .sk-circle-fade-dot:nth-child(5):before { animation-delay: -0.7s; }
		.ajax-throbber .sk-circle-fade-dot:nth-child(6):before { animation-delay: -0.6s; }
		.ajax-throbber .sk-circle-fade-dot:nth-child(7):before { animation-delay: -0.5s; }
		.ajax-throbber .sk-circle-fade-dot:nth-child(8):before { animation-delay: -0.4s; }
		.ajax-throbber .sk-circle-fade-dot:nth-child(9):before { animation-delay: -0.3s; }
		.ajax-throbber .sk-circle-fade-dot:nth-child(10):before { animation-delay: -0.2s; }
		.ajax-throbber .sk-circle-fade-dot:nth-child(11):before { animation-delay: -0.1s; }

		@keyframes sk-circle-fade {
		0%, 39%, 100% {
		opacity: 0;
		transform: scale(0.6);
		} 40% {
		opacity: 1;
		transform: scale(1);
		}

		.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;
		}