CSS3 Loading elements – part 2

CSS3 Loading elements – part 2

We received a lot of feedback on this article CSS3 Loading elements, so we decided to prepare the second part of this article. Where we will create 4 new loading elements. All of them use pure CSS3 animation and don’t use images. Let’s review them.

Live Demo

So, lets start


Step 1. HTML

You can see here four elements – our new ‘loading’ elements. Every of them have a very easy structure.

div class="main_body"
    div class="element"
        div class="loading1"
        /div
    /div
    div class="element"
        div class="loading2"
            div/div
        /div
    /div
    div class="element"
        div class="loading3"
            divloading../div
            div/div
            div/div
        /div
    /div
    div class="element"
        div class="loading4"
        /div
    /div
/div

Step 2. CSS

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

.loading1 {
    background-color: 
    width: 90px;
    height: 90px;
    border: 30px solid 
    border-right-width: 0;
    border-radius: 50%;
    box-shadow: 0 0 10px 5px 
    /* css3 animation */
    -webkit-animation: anim1 1s linear infinite;
    -moz-animation: anim1 1s linear infinite;
    -ms-animation: anim1 1s linear infinite;
    -o-animation: anim1 1s linear infinite;
    animation: anim1 1s linear infinite;
}
/* css3 keyframes - animation 1 */
@-webkit-keyframes anim1 {
    from { -webkit-transform: rotateX(45deg) rotateZ(0deg); }
    50% { -webkit-transform: rotateX(0deg) rotateZ(180deg); }
    to { -webkit-transform: rotateX(45deg) rotateZ(360deg); }
}
@-moz-keyframes anim1 {
    from { -moz-transform: rotateX(45deg) rotateZ(0deg); }
    50% { -moz-transform: rotateX(0deg) rotateZ(180deg); }
    to { -moz-transform: rotateX(45deg) rotateZ(360deg); }
}
@-ms-keyframes anim1 {
    from { -ms-transform: rotateX(45deg) rotateZ(0deg); }
    50% { -ms-transform: rotateX(0deg) rotateZ(180deg); }
    to { -ms-transform: rotateX(45deg) rotateZ(360deg); }
}
@-o-keyframes anim1 {
    from { -o-transform: rotateX(45deg) rotateZ(0deg); }
    50% { -o-transform: rotateX(0deg) rotateZ(180deg); }
    to { -o-transform: rotateX(45deg) rotateZ(360deg); }
}
@keyframes anim1 {
    from { transform: rotateX(45deg) rotateZ(0deg); }
    50% { transform: rotateX(0deg) rotateZ(180deg); }
    to { transform: rotateX(45deg) rotateZ(360deg); }
}

As you can see – we used CSS3 animation (with keyframes). This element looks like 3D button, all because of border-right-width: 0. This property emulates a push 3d button. Now, please review styles of our second ‘loading’ element:

.loading2 {
    background-color: 
    border-radius: 2px;
    height: 20px;
    margin-top: 60px;
    overflow: hidden;
    position: relative;
    width: 140px;
}
.loading2  div {
    background-color: 
    height: 100%;
    width: 0;
    /* css3 animation */
    -webkit-animation-name:anim2;
    -webkit-animation-duration:2.0s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -webkit-animation-timing-function:ease;
    -moz-animation-name:anim2;
    -moz-animation-duration:2.0s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -moz-animation-timing-function:ease;
    -ms-animation-name:anim2;
    -ms-animation-duration:2.0s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
    -ms-animation-timing-function:ease;
    -o-animation-name:anim2;
    -o-animation-duration:2.0s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    -o-animation-timing-function:ease;
    animation-name:anim2;
    animation-duration:2.0s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    animation-timing-function:ease;
}
/* css3 keyframes - animation 2 */
@-webkit-keyframes anim2 {
    from { width: 0; }
    50% { width: 100%; }
    to { width: 0; }
}
@-moz-keyframes anim2 {
    from { width: 0; }
    50% { width: 100%; }
    to { width: 0; }
}
@-ms-keyframes anim2 {
    from { width: 0; }
    50% { width: 100%; }
    to { width: 0; }
}
@-o-keyframes anim2 {
    from { width: 0; }
    50% { width: 100%; }
    to { width: 0; }
}
@keyframes anim2 {
    from { width: 0; }
    50% { width: 100%; }
    to { width: 0; }
}

This element uses css3 animation with keyframes too, and it looks like loading slider. The next one element:

.loading3 {
    border-radius: 50%;
    font-size: 20px;
    height: 100px;
    line-height: 90px;
    position: relative;
    text-align: center;
    width: 100px;
}
.loading3  div:nth-child(2), .loading3  div:nth-child(3) {
    background-color: rgba(255, 255, 255, 0.2);
    border: 5px solid 
    border-radius: 50%;
    box-shadow: 0 0 5px 0 
    height: 100px;
    position: absolute;
    top: 0px;
    /* set top and bottom border widths to 0 */
    border-top-width: 0;
    border-bottom-width: 0;
    /* css3 animation */
    -webkit-animation: anim3 2s linear infinite;
    -moz-animation: anim3 2s linear infinite;
    -ms-animation: anim3 2s linear infinite;
    -o-animation: anim3 2s linear infinite;
    animation: anim3 2s linear infinite;
}
.loading3  div:nth-child(2) {
    border-color: 
    left: 0px;
    width: 90px;
}
.loading3  div:nth-child(3) {
    border-color: 
    left: -5px;
    width: 100px;
    /* css3 delay */
    -webkit-animation-delay:0.5s;
    -moz-animation-delay:0.5s;
    -ms-animation-delay:0.5s;
    -o-animation-delay:0.5s;
    animation-delay:0.5s;
}
/* css3 keyframes - animation 3 */
@-webkit-keyframes anim3 {
    from { -webkit-transform: rotateY(0deg); }
    50% { -webkit-transform: rotateY(180deg); }
    to { -webkit-transform: rotateY(360deg); }
}
@-moz-keyframes anim3 {
    from { -moz-transform: rotateY(0deg); }
    50% { -moz-transform: rotateY(180deg); }
    to { -moz-transform: rotateY(360deg); }
}
@-ms-keyframes anim3 {
    from { -ms-transform: rotateY(0deg); }
    50% { -ms-transform: rotateY(180deg); }
    to { -ms-transform: rotateY(360deg); }
}
@-o-keyframes anim3 {
    from { -o-transform: rotateY(0deg); }
    50% { -o-transform: rotateY(180deg); }
    to { -o-transform: rotateY(360deg); }
}
@keyframes anim3 {
    from { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
    to { transform: rotateY(360deg); }
}

This is more interesting element, it looks like two semi-transparent circles in space around the label ‘loading’. We should generate 2 different circles and rotate them in Y coordinate, also we should set delay for the second circle. The last one element:

.loading4 {
    background: none repeat scroll 0 0 
    border-color: 
    border-radius: 100%;
    border-style: solid;
    border-width: 2px 2px 50px;
    height: 48px;
    position: relative;
    width: 96px;
    /* css3 animation */
    -webkit-animation: anim4 1s linear infinite;
    -moz-animation: anim4 2s linear infinite;
    -ms-animation: anim4 1s linear infinite;
    -o-animation: anim4 1s linear infinite;
    animation: anim4 1s linear infinite;
}
.loading4:before {
    background: none repeat scroll 0 0 
    border: 18px solid 
    border-radius: 100%;
    content: "";
    height: 12px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 12px;
}
.loading4:after {
    background: none repeat scroll 0 0 
    border: 18px solid 
    border-radius: 100%;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 12px;
}
/* css3 keyframes - animation 4 */
@-webkit-keyframes anim4 {
    from { -webkit-transform: rotateZ(0deg); }
    50% { -webkit-transform: rotateZ(180deg); }
    to { -webkit-transform: rotateZ(360deg); }
}
@-moz-keyframes anim4 {
    from { -moz-transform: rotateZ(0deg); }
    50% { -moz-transform: rotateZ(180deg); }
    to { -moz-transform: rotateZ(360deg); }
}
@-ms-keyframes anim4 {
    from { -ms-transform: rotateZ(0deg); }
    50% { -ms-transform: rotateZ(180deg); }
    to { -ms-transform: rotateZ(360deg); }
}
@-o-keyframes anim4 {
    from { -o-transform: rotateZ(0deg); }
    50% { -o-transform: rotateZ(180deg); }
    to { -o-transform: rotateZ(360deg); }
}
@keyframes anim4 {
    from { transform: rotateZ(0deg); }
    50% { transform: rotateZ(180deg); }
    to { transform: rotateZ(360deg); }
}

Live Demo

[sociallocker]

download result

[/sociallocker]


Conclusion

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