A CodePen by Jeremy T. Loading spinners - A few loading spinners using CSS3 animations

index.html

Background:
<input type="radio" id="blackBack" name="back" checked/>
<label for="blackBack">Black</label>
<input type="radio" id="whiteBack" name="back"/>
<label for="whiteBack">White</label>
<input type="radio" id="grayBack" name="back"/>
<label for="grayBack">Gray</label><br/>
Period:
<input type="radio" id="pulse" name="period"/>
<label for="pulse">Pulse</label>
<input type="radio" id="flash" name="period"/>
<label for="flash">Flash</label>
<input type="radio" id="two-sided" name="period"/>
<label for="two-sided">2-sided spin</label>
<input type="radio" id="2s" name="period" checked/>
<label for="2s">Spin</label>
<div class="wrapper">
<div class="ajaxSpinner circles">
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
</div>
<div class="ajaxSpinner lines">
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
</div>
<div class="ajaxSpinner ellipses">
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
  <div class="dotWrapper">
    <div class="dot"></div>
  </div>
</div>
</div>

style.css

body {
  background: white;
  line-height: 25px;
}

.wrapper {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}

#blackBack:checked ~ .wrapper {
  background: black; 
}

#whiteBack:checked ~ .wrapper {
  background: white; 
}

#grayBack:checked ~ .wrapper {
  background: #aaa; 
}


#pulse:checked ~ .wrapper .dot {
  animation-duration: 0.25s;
}

#flash:checked ~ .wrapper .dot {
  animation-duration: 0.5s;
}

#two-sided:checked ~ .wrapper .dot {
  animation-duration: 1s;
}

.ajaxSpinner {
  position: relative;
  float: left;
  height: 200px;
  width: 200px;
}

.ajaxSpinner:after {
	position: absolute;
	content: "Loading";
	left: 0;
  top: 0;
  height: 200px;
  width: 200px;
	line-height: 200px;
	color: white;
	text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;
	font-style: italic;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}

.ajaxSpinner .dot {
	background: white;
	position: absolute;
	left: 0;
  border: 1px solid black;
  
	animation: fade 2s linear infinite;
}

.circles .dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.lines .dot {
	width: 25px;
	height: 6px;
  margin-top: 7px;
}

.ellipses .dot {
	width: 30px;
	height: 10px;
  margin-top: 5px;
	border-radius: 50%;
}

.ajaxSpinner .dotWrapper {
	position: absolute;
	width: 100px;
	height: 20px;
	right: 50%;
	margin-right: -50px;
	top: 50%;
}

.dotWrapper:nth-child(2) {
	transform: rotate(45deg);
}
.dotWrapper:nth-child(2) .dot {
	animation-delay: -1.75s;
}

.dotWrapper:nth-child(3) {
	transform: rotate(90deg);
}
.dotWrapper:nth-child(3) .dot {
	animation-delay: -1.5s;
}

.dotWrapper:nth-child(4) {
	transform: rotate(135deg);
}
.dotWrapper:nth-child(4) .dot {
	animation-delay: -1.25s;
}

.dotWrapper:nth-child(5) {
	transform: rotate(180deg);
}
.dotWrapper:nth-child(5) .dot {
	animation-delay: -1s;
}

.dotWrapper:nth-child(6) {
	transform: rotate(225deg);
}
.dotWrapper:nth-child(6) .dot {
	animation-delay: -0.75s;
}

.dotWrapper:nth-child(7) {
	transform: rotate(270deg);
}
.dotWrapper:nth-child(7) .dot {
	animation-delay: -0.5s;
}

.dotWrapper:nth-child(8) {
	transform: rotate(315deg);
}
.dotWrapper:nth-child(8) .dot {
	animation-delay: -0.25s;
}

@keyframes fade {
	0% { transform: scale(1); opacity: 1;}
	60% { opacity: 0.1;}
	95% { transform: scale(0.1); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}