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!
