spinners/style.css

body {
	font-family: sans-serif;
	font-size: 3em;
	color: #FFF;
	text-align: center;
}

.section {
	height: 500px;
	line-height: 500px;
	margin: auto;
}

.loader {
	display: inline-block;
	height: 50px;
	width: 50px;
	border-style: solid;
	border-width: 6px;
	border-radius: 50px;
	border-color: #FFF;
	vertical-align: middle;
	position: relative;
}


/*
 * Section 1
 */

 .section1 {
 	background-color: #2cc36b;
 }

 .loader-quart {
 	border-color: rgba(255, 255, 255, 0.6);
 }

 .loader-quart:after {
 	content: '';
 	border-color: transparent;
 	border-top-color: #FFF;
 	border-style: solid;
 	border-radius: 50px;
 	border-width: 6px;
 	top: -6px;
 	right: -6px;
 	width: 50px;
 	height: 50px;
 	position: absolute;
 	-webkit-animation: spin 1s linear infinite;
 	        animation: spin 1s linear infinite;
 }

 /*
 * Section 2
 */

 .section2 {
 	background-color: #2980b9;
 }

 /*
  * Keyframe
  */

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

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

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