Circular loading animation thingy consisting of three rings thing that change colors while spinning in opposite directions. Pure CSS approach using keyframes. No big deal. Here it go right here: http://cdpn.io/KJsjv

slow-your-roll.html

<div id="loading_animation">
  <div class="outside_ring"></div>
  <div class="middle_ring"></div>
  <div class="inner_ring"></div>
  <span id="animation_message">Slow Your Roll</span>
</div>

styles.css

*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
 
html, body{
background-color: #e9ebef;  
padding: 5%;
}

#loading_animation {
border-radius: 50%;
height: 20em;
width: 20em;
position: relative;
}
 
.outside_ring {
border-radius: 50%;
height: 22em;
width: 22em;
border: 1em solid #cdd4db;
border-bottom: 1em solid #42C88E;
border-left: 1em solid #42C88E;
-webkit-animation: clockwise-outside 2s infinite;
animation: clockwise-outside 2s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
z-index: 1;
}
 
.middle_ring {
border-radius: 50%;
height: 18em;
width: 18em;
position: absolute;
top: 2em;
left: 2em;
border: 1em solid transparent;
border-bottom: 1em solid #42C88E;
border-left: 1em solid #42C88E;
-webkit-animation: counter-clockwise 2.5s infinite;
animation: counter-clockwise 4s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
z-index: 2;
}
 
.inner_ring {
border-radius: 50%;
position: absolute;
z-index: 3;
height: 14em;
width: 14em;
top: 4em;
left: 4em;
border: 1em solid transparent;
border-bottom: 1em solid #42C88E;
-webkit-animation: clockwise 2s infinite;
animation: clockwise 1s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
 
#animation_message {
font-family: helvetica;
font-size: 1.5em;
font-weight: 600;
text-align: center;
color: #bbb;
position: absolute;
left: 2.35em;
top: 6.6em;
width: 10em;
z-index: 4;
}

@-webkit-keyframes counter-clockwise {
0% {
-webkit-transform: rotate(360deg);
border-left: 1em solid #42C88E;
border-bottom: 1em solid #42C88E;
}
 
50%{
border-bottom: 1em solid #7DFFEB;
border-left: 1em solid #7DFFEB;
}
 
100% {
-webkit-transform: rotate(0);
border-left: 1em solid #42C88E;
border-bottom: 1em solid #42C88E;    
}
}
@-keyframes counter-clockwise {
0% {
transform: rotate(360deg);
border-left: 1em solid #42C88E;
border-bottom: 1em solid #42C88E;
}
 
50%{
border-bottom: 1em solid #7DFFEB;
border-left: 1em solid #7DFFEB;
}
 
100% {
transform: rotate(0);
border-left: 1em solid #42C88E;
border-bottom: 1em solid #42C88E;    
}
}
 
 
@-webkit-keyframes clockwise {
0% {
-webkit-transform: rotate(0);
border-left: 1em solid #3AE4B4;
border-bottom: 1em solid #3AE4B4;
}
 
50%{
border-left: 1em solid #7DFFEB;
border-bottom: 1em solid #7DFFEB;
}
 
100% {
-webkit-transform: rotate(360deg);
border-left: 1em solid #3AE4B4;
border-bottom: 1em solid #3AE4B4;
}
}
 
@-keyframes clockwise {
0% {
transform: rotate(0);
border-left: 1em solid #3AE4B4;
border-bottom: 1em solid #3AE4B4;
}
 
50%{
border-left: 1em solid #7DFFEB;
border-bottom: 1em solid #7DFFEB;
}
 
100% {
transform: rotate(360deg);
border-left: 1em solid #3AE4B4;
border-bottom: 1em solid #3AE4B4;
}
}
 
 
@-webkit-keyframes clockwise-outside {
0% {
-webkit-transform: rotate(0);
border-left: 1em solid #42C88E;
border-bottom: 1em solid #42C88E;
}
 
50%{
border-left: 1em solid #7DFFEB;
border-bottom: 1em solid #7DFFEB;
}
 
100% {
-webkit-transform: rotate(360deg);
border-left: 1em solid #42C88E;
border-bottom: 1em solid #42C88E;
}
}
 
@-keyframes clockwise-outside {
0% {
transform: rotate(0);
border-left: 1em solid #42C88E;
border-bottom: 1em solid #42C88E;
}
 
50%{
border-left: 1em solid #7DFFEB;
border-bottom: 1em solid #7DFFEB;
}
 
100% {
transform: rotate(360deg);
border-left: 1em solid #42C88E;
border-bottom: 1em solid #42C88E;
}
}