CSS3 Loading elements

CSS3 Loading elements

7 91810
CSS3 Loading elements

CSS3 Loading elements

In our new tutorial I will show you how to create pure CSS3 loading elements (without any images). I think that it can be interesting for you in order to decrease amount of extra images in your project. I prepared three different loading elements. Now, lets check how I made them.

Live Demo
download result

So, lets start


Step 1. HTML

You can see here three elements – our ‘loading’ elements. All of them are very easy – parent element with set of inner DIVs.

<div class="main_body">
    <div class="element">
        <div class="loading1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="element">
        <div class="loading2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="element">
        <div class="loading3">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

Step 2. CSS

Now, the most interesting step, I will give you styles of each ‘loading’ element. Welcome to check styles of first one:

.loading1 {
    height:100px;
    position:relative;
    width:80px;
}
.loading1 > div {
    background-color:#FFFFFF;
    height:30px;
    position:absolute;
    width:12px;
    /* css3 radius */
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    /* css3 transform - scale */
    -webkit-transform:scale(0.4);
    -moz-transform:scale(0.4);
    -o-transform:scale(0.4);
    /* css3 animation */
    -webkit-animation-name:loading1;
    -webkit-animation-duration:1.04s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -moz-animation-name:loading1;
    -moz-animation-duration:1.04s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -o-animation-name:loading1;
    -o-animation-duration:1.04s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
}
.loading1 > div:nth-child(1) {
    left:0;
    top:36px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    /* css3 animation */
    -webkit-animation-delay:0.39s;
    -moz-animation-delay:0.39s;
    -o-animation-delay:0.39s;
}
.loading1 > div:nth-child(2) {
    left:10px;
    top:13px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    /* css3 animation */
    -webkit-animation-delay:0.52s;
    -moz-animation-delay:0.52s;
    -o-animation-delay:0.52s;
}
.loading1 > div:nth-child(3) {
    left:34px;
    top:4px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    /* css3 animation */
    -webkit-animation-delay:0.65s;
    -moz-animation-delay:0.65s;
    -o-animation-delay:0.65s;
}
.loading1 > div:nth-child(4) {
    right:10px;
    top:13px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    /* css3 animation */
    -webkit-animation-delay:0.78s;
    -moz-animation-delay:0.78s;
    -o-animation-delay:0.78s;
}
.loading1 > div:nth-child(5) {
    right:0;
    top:36px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    /* css3 animation */
    -webkit-animation-delay:0.91s;
    -moz-animation-delay:0.91s;
    -o-animation-delay:0.91s;
}
.loading1 > div:nth-child(6) {
    right:10px;
    bottom:9px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    -o-transform:rotate(135deg);
    /* css3 animation */
    -webkit-animation-delay:1.04s;
    -moz-animation-delay:1.04s;
    -o-animation-delay:1.04s;
}
.loading1 > div:nth-child(7) {
    bottom:0;
    left:34px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    /* css3 animation */
    -webkit-animation-delay:1.17s;
    -moz-animation-delay:1.17s;
    -o-animation-delay:1.17s;
}
.loading1 > div:nth-child(8) {
    left:10px;
    bottom:9px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(-135deg);
    -moz-transform:rotate(-135deg);
    -o-transform:rotate(-135deg);
    /* css3 animation */
    -webkit-animation-delay:1.3s;
    -moz-animation-delay:1.3s;
    -o-animation-delay:1.3s;
}
/* css3 keyframes - loading1 */
@-webkit-keyframes loading1 {
    0%{ background-color:#000000 }
    100%{ background-color:#FFFFFF }
}
@-moz-keyframes loading1 {
    0%{ background-color:#000000 }
    100%{ background-color:#FFFFFF }
}
@-o-keyframes loading1 {
    0%{ background-color:#000000 }
    100%{ background-color:#FFFFFF }
}

As you can see – I used CSS3 animation with keyframes, each step (point) is separated with delay with each other. Now, please review styles of our second ‘loading’ element:

.loading2 {
    height:140px;
    position:relative;
    width:140px;
    /* css3 transform - scale */
    -webkit-transform:scale(0.6);
    -moz-transform:scale(0.6);
    -o-transform:scale(0.6);
}
.loading2 > div {
    background-color:#FFFFFF;
    height:25px;
    position:absolute;
    width:25px;
    /* css3 radius */
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    /* css3 animation */
    -webkit-animation-name:loading2;
    -webkit-animation-duration:1.04s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -moz-animation-name:loading2;
    -moz-animation-duration:1.04s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -o-animation-name:loading2;
    -o-animation-duration:1.04s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
}
.loading2 > div:nth-child(1) {
    left:0;
    top:57px;
    /* css3 animation */
    -webkit-animation-delay:0.39s;
    -moz-animation-delay:0.39s;
    -o-animation-delay:0.39s;
}
.loading2 > div:nth-child(2) {
    left:17px;
    top:17px;
    /* css3 animation */
    -webkit-animation-delay:0.52s;
    -moz-animation-delay:0.52s;
    -o-animation-delay:0.52s;
}
.loading2 > div:nth-child(3) {
    left:57px;
    top:0;
    /* css3 animation */
    -webkit-animation-delay:0.65s;
    -moz-animation-delay:0.65s;
    -o-animation-delay:0.65s;
}
.loading2 > div:nth-child(4) {
    right:17px;
    top:17px;
    /* css3 animation */
    -webkit-animation-delay:0.78s;
    -moz-animation-delay:0.78s;
    -o-animation-delay:0.78s;
}
.loading2 > div:nth-child(5) {
    right:0;
    top:57px;
    /* css3 animation */
    -webkit-animation-delay:0.91s;
    -moz-animation-delay:0.91s;
    -o-animation-delay:0.91s;
}
.loading2 > div:nth-child(6) {
    right:17px;
    bottom:17px;
    /* css3 animation */
    -webkit-animation-delay:1.04s;
    -moz-animation-delay:1.04s;
    -o-animation-delay:1.04s;
}
.loading2 > div:nth-child(7) {
    left:57px;
    bottom:0;
    /* css3 animation */
    -webkit-animation-delay:1.17s;
    -moz-animation-delay:1.17s;
    -o-animation-delay:1.17s;
}
.loading2 > div:nth-child(8) {
    left:17px;
    bottom:17px;
    /* css3 animation */
    -webkit-animation-delay:1.3s;
    -moz-animation-delay:1.3s;
    -o-animation-delay:1.3s;
}
/* css3 keyframes - loading2 */
@-webkit-keyframes loading2 {
    0%{ background-color:#000000 }
    100%{ background-color:#FFFFFF }
}
@-moz-keyframes loading2 {
    0%{ background-color:#000000 }
    100%{ background-color:#FFFFFF }
}
@-o-keyframes loading2 {
    0%{ background-color:#000000 }
    100%{ background-color:#FFFFFF }
}

I used here the same idea as for the first element, but, with slightly changed styles. And finally – our third ‘loading’ element:

.loading3 > div {
    background-color:#FFFFFF;
    border:1px solid #000000;
    float:left;
    height:114px;
    margin-left:5px;
    width:30px;
    opacity:0.1;
    /* css3 transform - scale */
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    /* css3 animation */
    -webkit-animation-name:loading3;
    -webkit-animation-duration:1.2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -moz-animation-name:loading3;
    -moz-animation-duration:1.2s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -o-animation-name:loading3;
    -o-animation-duration:1.2s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
}
.loading3 > div:nth-child(1) {
    /* css3 animation */
    -webkit-animation-delay:0.24s;
    -moz-animation-delay:0.24s;
    -o-animation-delay:0.24s;
}
.loading3 > div:nth-child(2) {
    /* css3 animation */
    -webkit-animation-delay:0.48s;
    -moz-animation-delay:0.48s;
    -o-animation-delay:0.48s;
}
.loading3 > div:nth-child(3) {
    /* css3 animation */
    -webkit-animation-delay:0.72s;
    -moz-animation-delay:0.72s;
    -o-animation-delay:0.72s;
}
.loading3 > div:nth-child(4) {
    /* css3 animation */
    -webkit-animation-delay:0.96s;
    -moz-animation-delay:0.96s;
    -o-animation-delay:0.96s;
}
.loading3 > div:nth-child(5) {
    /* css3 animation */
    -webkit-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
    -o-animation-delay:1.2s;
}
/* css3 keyframes - loading3 */
@-webkit-keyframes loading3 {
    0% {
        -webkit-transform:scale(1.2);
        opacity:1;
    }
    100% {
        -webkit-transform:scale(0.7);
        opacity:0.1;
    }
}
@-moz-keyframes loading3 {
    0% {
        -moz-transform:scale(1.2);
        opacity:1;
    }
    100% {
        -moz-transform:scale(0.7);
        opacity:0.1;
    }
}
@-o-keyframes loading3 {
    0% {
        -o-transform:scale(1.2);
        opacity:1;
    }
    100% {
        -o-transform:scale(0.7);
        opacity:0.1;
    }
}

Live Demo
download result

Conclusion

That is all for today. We have just created three different ‘loading’ elements. I hope that everything have been easy for you and you like result. Good luck!

SIMILAR ARTICLES


7 COMMENTS

  1. Hi great snippet! One question, how did you manage to write that thing, and calculate the angles and the rest mathematical staff?

    • Hello Dimitris,
      This is not so difficult my friend, You should always remember that there are only 360 degrees in a circle. You should remember the total time of animation and amount of elements. And after – pure school mathematic :-)

  2. Hello, can you explain the parts of the code? The logic ? How did you make to produce this 8 elements round ?
    I am trying to change width and height, and have no luck, since it messes up the entire element. How did you manage to know you needed 100 wide by 80 height ?
    Thanks in advance

  3. Thank you very Much… I cant understand how these are been placed in web pages.. Now I understood very clearly… Thank you so much…

    • Do you think so? Try to compare amount of code :-)
      I don’t think that there will be very big difference.

  4. Hi Admin

    I am a great fan of yours last many three years i am seeing your designs, styles. the main thing is that you uses purely css and html very less j-query codes thats make loading and working so fast and easy.

    I think you are great no body can match u in designing, even all the designers of facebook and googles are placed together cannot match you.

    I am a new learner. learnt html from ur site never gone to any html school. but hopin to design a site. i hope u will help me.
    Thanks
    and i love u for ur designs

Leave a Reply