Simple Css Loaders With Animations

DEMO

CSS.container {
 width: 450px;
 margin: 40px auto;
 overflow: hidden;
}

.loader_back {
 width: 66px;
 height: 66px;
 padding: 10px;
 color: #fff;
 font-weight: bold;
 text-align: center;
 background: #000;
 
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 
 float: left;
 margin: 10px;
}

.loader {
 width: 50px;
 height: 50px;
 border-right: 8px solid #4D4D4D;
 border-bottom: 8px solid #4D4D4D;
 
 margin: auto;
 
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 
 -webkit-animation: rotate 2s infinite linear;
 -moz-animation: rotate 2s infinite linear;
 -ms-animation: rotate 2s infinite linear;
 animation: rotate 2s infinite linear;
}

.loader.yellow {
 border-left: 8px solid #CCC366;
 border-top: 8px solid #CCC366;
}

.loader.orange {
 border-left: 8px solid #CC8F66;
 border-top: 8px solid #CC8F66;
}

.loader.red {
 border-left: 8px solid #CC6866;
 border-top: 8px solid #CC6866;
}

.loader.pink {
 border-left: 8px solid #CC66C3;
 border-top: 8px solid #CC66C3; 
}

.loader.violet {
 border-left: 8px solid #A366CC;
 border-top: 8px solid #A366CC; 
}

.loader.blue {
 border-left: 8px solid #6670CC;
 border-top: 8px solid #6670CC; 
}

.loader.green {
 border-left: 8px solid #66CC74;
 border-top: 8px solid #66CC74; 
}

@-webkit-keyframes rotate {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(360deg);}
}
@-ms-keyframes rotate {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(360deg);}
}
@keyframes rotate {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(360deg);}
}

HTML<div class="container">
 
<div class="loader_back">
 <div class="loader yellow"></div>
</div>

<div class="loader_back">
 <div class="loader orange"></div>
</div>

<div class="loader_back">
 <div class="loader red"></div>
</div>

<div class="loader_back">
 <div class="loader pink"></div>
</div>

<div class="loader_back">
 <div class="loader pink"></div>
</div>

<div class="loader_back">
 <div class="loader violet"></div>
</div>

<div class="loader_back">
 <div class="loader blue"></div>
</div>

<div class="loader_back">
 <div class="loader green"></div>
</div>
 
</div>