效果：
使用CSS3完成loading的制作
css样式:
<style type="text/css">
.mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.1);
}
.mask-loading {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
}
.mask-loading div {
20px;
height: 20px;
float: left;
margin-right: 5px;
background-color: #0179B5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.mask-loading div:nth-child(1) {
-webkit-animation: loading 0.5s ease 0s infinite alternate;
animation: loading 0.5s ease 0s infinite alternate;
}
.mask-loading div:nth-child(2) {
-webkit-animation: loading 0.5s ease 0.1s infinite alternate;
animation: loading 0.5s ease 0.1s infinite alternate;
}
.mask-loading div:nth-child(3) {
margin-right: 0;
-webkit-animation: loading 0.5s ease 0.2s infinite alternate;
animation: loading 0.5s ease 0.2s infinite alternate;
}
@keyframes loading {
from {
/*缩放*/
transform: scale(1);
background-color: lightcoral;
}
to {
transform: scale(0.5);
background-color: #0179B5;
}
}
@-webkit-keyframes loading {
from {
transform: scale(1);
background-color: lightcoral;
}
to {
transform: scale(0.5);
background-color: #0179B5;
}
}
@-moz-keyframes loading {
from {
transform: scale(1);
background-color: lightcoral;
}
to {
transform: scale(0.5);
background-color: #0179B5;
}
}
@-o-keyframes loading {
from {
transform: scale(1);
background-color: lightcoral;
}
to {
transform: scale(0.5);
background-color: #0179B5;
}
}
</style>
HTML:
<body>
<div class="mask">
<div class="mask-loading">
<div></div>
<div></div>
<div></div>
<p>Loading...</p>
</div>
</div>
</body>