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.
CSS3加载元素在我们的新教程中,我将向您展示如何创建纯CSS3加载元素(不包含任何图像)。 我认为,这对于减少项目中多余图像的数量可能很有趣。 我准备了三个不同的加载元素。 现在,让我们检查一下我是如何制作的。
现场演示
下载结果
So, lets start
所以,让我们开始吧
步骤1. HTML (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集的父元素。
<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>
<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>
步骤2. CSS (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 }
}
.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:
如您所见–我将CSS3动画与关键帧一起使用,每个步骤(点)之间彼此延迟地分开。 现在,请查看第二个“加载”元素的样式:
.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 }
}
.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;
}
}
.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;
}
}
现场演示
下载结果
结论 (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!
今天就这些。 我们刚刚创建了三个不同的“加载”元素。 我希望一切对您来说都很容易,并且您喜欢结果。 祝好运!
翻译自: https://www.script-tutorials.com/css3-loading-elements/