How to create Pure CSS3 Preloaders

The HTML

To create this circular PreLoader we will only use 2 HTML elements.

<div id="preloaderContainer">
       <div id="preloader">
       </div>
</div>

Customized CSS

The container will only have a position relative and an inline block display, so it can be easier to display it anywhere on our webpage forcing it not to occupy any extra width or height.


#preloaderContainer
{
      position:relative;
      display:inline-block;
}

Now we will customize the preloader the way we like. Starting by the width and the height, we should make sure they are the same so we can have a good circle.

#preloader
{
    width:50px;
    height:50px;
}

Now we will add some border radius to create the circle shape.

#preloader
{
    border-radius:50px;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
}

Now we will define the border, its size and color.

#preloader
{
    border-style:solid;
    border-color:blue;
    border-width:5px;
}

Finally, a background color (optional).

#preloader
{
    background-color:black;
}

By now, we should have something like this:

Pseudo-Elements

 
Now we must customize the  pseudo-elements of preloaderContainer. The :before and :after pseudo-elements will create the circulation effects.

Let's start by :before.
 
#preloaderContainer:before
{
     content:"";
     display:block;
     position:absolute;
}

Now we will make it look like a circle same as #preloader.

#preloaderContainer:before
{
     width:50px;
     height:50px;
     border-radius:50px;
     -moz-border-radius:50px;
     -webkit-border-radius:50px;
     border-style:solid;
     border-color:aqua;
     border-width:5px;
}

Now things should look like this.

We need to clip this circle so it can become a Semicircle, but we must define the pixels precisely.
The top and left will be 0 pixels. The right is equal to the width divided by 2, plus the border width, in this case, (50 / 2) + 5 = 30. The bottom needs to be bigger than the height, to avoid any problems, make it double, in this case, 100 pixels.

#preloaderContainer:before
{
    clip:rect(0px, 30px, 100px, 0px);
    z-index:1;
}

Now we will customize :after. Same procedure.


#preloaderContainer:after
{
     content:"";
     display:block;
     position:absolute;
     top:0;
     left:0;
     width:50px;
     height:50px;
     border-radius:50px;
     -moz-border-radius:50px;
     -webkit-border-radius:50px;
     border-style:solid;
     border-color:aqua;
     border-width:5px;
    clip:rect(0px, 30px, 100px, 0px);
    z-index:2;
}

We won't notice any difference because :before is actually positioned under :after.

Animation

For this preloader we need 2 animations.
The full rotation for this example will be 5 seconds.
The first animation will rotate the :before 180 degrees in 2.5 seconds, then wait another 2.5 seconds so that the second animation finishes its rotation, means the second animation will have a delay of 2.5 seconds before it starts rotating.

@keyframes loading{   
    0% { transform: rotate(0deg); }   
    50% {transform: rotate(180deg);}
    100% {transform: rotate(180deg);}
}

The duration between 50% and 100% will act as a delay, allowing the :after to rotate and end its rotation.

The second animation:

@keyframes loading1{   
    0% { transform:rotate(180deg); border-color:aqua; }   
    49% {transform: rotate(360deg); border-color:aqua;}   
    50% {transform: rotate(360deg); border-color:blue;}   
    100% {transform: rotate(360deg); border-color:blue;}
}

The Second animation will have a delay of 2.5 seconds. The original color of :after 's border will be made blue, same as the default color of #preloader, and since :after is positioned above :before (z-index), this will allow :before to rotate under the blue border.

#preloaderContainer
{
    border-color:blue;
}

And that's it, the only thing left is to assign these animations for :before and :after.

#preloaderContainer:before
{
    animation: loading;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
}

#preloaderContainer:after
{
    animation: loading1;
    animation-duration: 5s;
    animation-delay:2.5s;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
}

Download Full CSS