spinners/style.css

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

.table-side {
  width: 100%;
}

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

.main-container {
  width: 100%;
  vertical-align: top;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0;
  height: 200px;
}

.center-container {
  width: 480px;
  padding: 0;
}

.side-container {
  background-color: #8e44ad;
  padding: 0;
}

.header-container {
  background-color: #34495e;
  width: auto;
  padding: 0;
  height: 50px;
}

/*
 * 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);
  	}
  }


  /*
  * Section 3
  */

  .section3 {
    background-color: #e74c3c;
    line-height: 50px;
    height: 200px;
  }

  .void {
    height: 150px;
  }