CSS3 Preloaders

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.

HTML

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

CSS


.preloader1 {
   width:35px;
   height:35px;
   display:inline-block;
   padding:0px;
   border-radius:100%;
   border:2px solid;
   border-top-color:rgba(0,0,0, 0.65);
   border-bottom-color:rgba(0,0,0, 0.65);
   border-left-color:rgba(0,0,0, 0.15);
   border-right-color:rgba(0,0,0, 0.15);
   -webkit-animation: preloader1 0.8s ease-in-out infinite alternate;
   animation: preloader1 0.8s ease-in-out infinite alternate;
}
@keyframes preloader1 {
   from {transform: rotate(0deg);}
   to {transform: rotate(360deg);}
}
@-webkit-keyframes preloader1 {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(360deg);}
}

HTML

<div class="preloader2"></div>

CSS

.preloader2 {
   width:35px;
   height:35px;
   display:inline-block;
   padding:0px;
   border-radius:100%;
   border:2px solid;
   border-top-color:rgba(0,0,0, 0.65);
   border-bottom-color:rgba(0,0,0, 0.15);
   border-left-color:rgba(0,0,0, 0.65);
   border-right-color:rgba(0,0,0, 0.15);
   -webkit-animation: preloader2 0.8s linear infinite;
   animation: preloader2 0.8s linear infinite;
}
@keyframes preloader2 {
   from {transform: rotate(0deg);}
   to {transform: rotate(360deg);}
}
@-webkit-keyframes preloader2 {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(360deg);}
}

HTML

 <div class="preloader3"></div>

CSS


.preloader3 {
   color:#ffffff;
   width:50px;
   height:50px;
   display:inline-block;
   padding:0px;
   opacity:0.5;
   background:#000000;
   -webkit-animation: preloader3 1.5s ease-in-out infinite alternate;
   animation: preloader3 1.5s ease-in-out infinite alternate;
}
@keyframes preloader3 {
   from {transform: rotate(0deg) scale(1,1);border-radius:0px;}
   to {transform: rotate(720deg) scale(0.5, 0.5);border-radius:25px;}
}
@-webkit-keyframes preloader3 {
   from {-webkit-transform: rotate(0deg) scale(1, 1);border-radius:0px;}
   to {-webkit-transform: rotate(720deg) scale(0.5, 0.5);border-radius:25px;}
}
          

HTML


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

CSS


.preloader4 {
   width:72px;
   height:8px;
   display:inline-block;
   padding:0px;
   text-align:left;
}
.preloader4 span {
   position:absolute;
   display:inline-block;
   width:8px;
   height:8px;
   border-radius:100%;
   background:#000000;
   opacity:0.2;
   -webkit-animation:preloader41 2s linear infinite alternate;
   animation:preloader41 2s linear infinite alternate;
}
.preloader4 span:nth-child(2) {animation-name:preloader22;-webkit-animation-name:preloader22;}
.preloader4 span:nth-child(3) {animation-name:preloader23;-webkit-animation-name:preloader23;}
.preloader4 span:nth-child(4) {animation-name:preloader24;-webkit-animation-name:preloader24;}
.preloader4 span:nth-child(5) {animation-name:preloader25;-webkit-animation-name:preloader25;}
@keyframes preloader21 {
   0% {margin-left:0px;}
   50% {margin-left:64px;}
   100% {margin-left:64px;}
}
@-webkit-keyframes preloader21 {
   0% {margin-left:0px;}
   50% {margin-left:64px;}
   100% {margin-left:64px;}
}
@keyframes preloader22 {
   0% {margin-left:0px;}
   37.5% {margin-left:48px;}
   87.5% {margin-left:48px;}
   100% {margin-left:64px;}
}
@-webkit-keyframes preloader22 {
   0% {margin-left:0px;}
   37.5% {margin-left:48px;}
   87.5% {margin-left:48px;}
   100% {margin-left:64px;}
}
@keyframes preloader23 {
   0% {margin-left:0px;}
   25% {margin-left:32px;}
   75% {margin-left:32px;}
   100% {margin-left:64px;}
}
@-webkit-keyframes preloader23 {
   0% {margin-left:0px;}
   25% {margin-left:32px;}
   75% {margin-left:32px;}
   100% {margin-left:64px;}
}
@keyframes preloader24 {
   0% {margin-left:0px;}
   12.5% {margin-left:16px;}
   62.5% {margin-left:16px;}
   100% {margin-left:64px;}
}
@-webkit-keyframes preloader24 {
   0% {margin-left:0px;}
   12.5% {margin-left:16px;}
   62.5% {margin-left:16px;}
   100% {margin-left:64px;}
}
@keyframes preloader25 {
   0% {margin-left:0px;}
   50% {margin-left:0px;}
   100% {margin-left:64px;}
}
@-webkit-keyframes preloader25 {
   0% {margin-left:0px;}
   50% {margin-left:0px;}
   100% {margin-left:64px;}
}