.spinner {
  animation: spinner 1s infinite linear;
}
 
@keyframes spinner {
  to {
	  transform: rotate(360deg);
  }
}

.loading-round:before { border-radius: 50%; content: " "; width: 48px; height: 48px; display: inline-block; box-sizing: border-box; border-top: solid 4px #bababa; border-right: solid 4px #bababa; border-bottom: solid 4px #bababa; border-left: solid 4px #bababa; }
.loading-round:after { border-radius: 50%; content: " "; width: 48px; height: 48px; display: inline-block; box-sizing: border-box; border-top: solid 4px #999; border-right: solid 4px transparent; border-bottom: solid 4px transparent; border-left: solid 4px transparent; position: absolute; top: 0; left: 0; animation: loading-round-animate 1s ease-in-out infinite; }

@keyframes loading-round-animate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

.loading-circle { width: 48px; height: 48px; border-radius: 50%; border-top: 4px solid transparent; border-right: 4px solid #999; border-bottom: 4px solid #999; border-left: 4px solid #999; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: loading-circle-spin 1s infinite linear; animation: loading-circle-spin 1s infinite linear; }

@keyframes loading-circle-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

.loading-rotating-plane { width: 48px; height: 48px; background-color: #999; -webkit-animation: loading-rotatePlane 1.2s infinite ease-in-out; animation: loading-rotatePlane 1.2s infinite ease-in-out; -webkit-border-radius: 2px;
-moz-border-radius: 2px; border-radius: 2px; }
@-webkit-keyframes loading-rotatePlane {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
 @keyframes loading-rotatePlane {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
 50% {
 -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
 transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
 100% {
 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}

.loading-spinner-pulse { width: 48px; height: 48px; background-color: #999; border-radius: 100%; -webkit-animation: loading-pulseScaleOut 1s infinite ease-in-out; animation: loading-pulseScaleOut 1s infinite ease-in-out; }
 @-webkit-keyframes loading-pulseScaleOut {
 0% {
 -webkit-transform: scale(0);
 transform: scale(0);
}
 100% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 0;
}
}
 @keyframes loading-pulseScaleOut {
 0% {
 -webkit-transform: scale(0);
 transform: scale(0);
}
 100% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 0;
}
}

/* Loading Size
================================================================================================= */
.loading-big { width: 62px; height: 62px; display: inline-block; box-sizing: border-box; position: relative; }
.loading-big-center { position: absolute; top: 50%; left: 50%; margin-left: -31px; margin-top: -31px; }

.loading { width: 48px; height: 48px; display: inline-block; box-sizing: border-box; position: relative; }
.loading-center { position: absolute; top: 50%; left: 50%; margin-left: -20px; margin-top: -20px; }

.loading-small { width: 28px; height: 28px; display: inline-block; box-sizing: border-box; position: relative; }
.loading-small-center { position: absolute; top: 50%; left: 50%; margin-left: -14px; margin-top: -14px; }