CSS3 Preloaders

Below you will find a range of pure CSS3 code preloaders. These preloaders can be used instead of animated gifs to let the end user know that content is being loaded. If you would like to add your preloader to this page, please contact me.
To view code used, click on the preloader.

  

Source Code for:

<div class="preloader1">
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
</div>

.preloader1 {
   width:40px;
   height:40px;
   display:inline-block;
   padding:0px;
   text-align:left;
   -webkit-animation:preloader1 1.4s linear infinite;
   animation:preloader1 1.4s linear infinite;
}
.preloader1 span {
   position:absolute;
   vertical-align:top;
   border-radius:100%;
   background:#000000;
   display:inline-block;
   width:8px;
   height:8px;
   margin-left:16px;
   transform-origin:center 20px;
   -webkit-transform-origin:center 20px;
}
.preloader1 span:nth-child(2) {transform: rotate(36deg);-webkit-transform: rotate(36deg); opacity:0.1;}
.preloader1 span:nth-child(3) {transform: rotate(72deg);-webkit-transform: rotate(72deg); opacity:0.2;}
.preloader1 span:nth-child(4) {transform: rotate(108deg);-webkit-transform: rotate(108deg); opacity:0.3;}
.preloader1 span:nth-child(5) {transform: rotate(144deg);-webkit-transform: rotate(144deg); opacity:0.4;}
.preloader1 span:nth-child(6) {transform: rotate(180deg);-webkit-transform: rotate(180deg); opacity:0.5;}
.preloader1 span:nth-child(7) {transform: rotate(216deg);-webkit-transform: rotate(216deg); opacity:0.6;}
.preloader1 span:nth-child(8) {transform: rotate(252deg);-webkit-transform: rotate(252deg); opacity:0.7;}
.preloader1 span:nth-child(9) {transform: rotate(288deg);-webkit-transform: rotate(288deg); opacity:0.8;}
.preloader1 span:nth-child(10) {transform: rotate(324deg);-webkit-transform: rotate(324deg); opacity:0.9;}
@keyframes preloader1 {
   from {transform: rotate(0deg);}
   to {transform: rotate(360deg);}
}
@-webkit-keyframes preloader1 {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(360deg);}
}