A Pen by Jabran Rafique.

CSS-Spinning-AJAX-Wheel.markdown

CSS Spinning/AJAX Wheel

A Pen by Jabran Rafique on CodePen.

License.

index.html

<div class="loading"></div>

style.css

body {
  background-color: #eee;
}
.loading {
  margin: 10% auto;
	border-bottom: 6px solid #fff;
	border-left: 6px solid #fff;
	border-right: 6px solid #c30;
	border-top: 6px solid #c30;
	border-radius: 100%;
	height: 125px;
	width: 125px;
	-webkit-animation: spin .6s infinite linear;
	-moz-animation: spin .6s infinite linear;
	-ms-animation: spin .6s infinite linear;
	-o-animation: spin .6s infinite linear;
	animation: spin .6s infinite linear;
}

@keyframes "spin" {
 from {
    -webkit-transform: rotate(0deg);
   	-moz-transform: rotate(0deg);
   	-o-transform: rotate(0deg);
   	-ms-transform: rotate(0deg);
   	transform: rotate(0deg);
 }
 to {
    -webkit-transform: rotate(359deg);
   	-moz-transform: rotate(359deg);
   	-o-transform: rotate(359deg);
   	-ms-transform: rotate(359deg);
   	transform: rotate(359deg);
 }

}

@-moz-keyframes spin {
 from {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -moz-transform: rotate(359deg);
   transform: rotate(359deg);
 }

}

@-webkit-keyframes "spin" {
 from {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -webkit-transform: rotate(359deg);
   transform: rotate(359deg);
 }

}

@-ms-keyframes "spin" {
 from {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -ms-transform: rotate(359deg);
   transform: rotate(359deg);
 }

}

@-o-keyframes "spin" {
 from {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -o-transform: rotate(359deg);
   transform: rotate(359deg);
 }

}