使用方法：
1.可以直接到我的 github 上下载整个项目的源码。
github地址：https://github.com/yyzheng1729/loading
2.直接复制下面的代码（记得自己引入 jquery 文件）
第一种：实心球
效果图片如下：
源码如下：
html 代码：
<div class="sk-three-bounce" id="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
</div>css 代码：
.sk-three-bounce {
/*使用弹性布局让加载动画持续会于页面中央，不随滚动条变化*/
position: fixed;
top: 50%;
left: 50%;
}
.sk-three-bounce .sk-child {
/*在这里设置加载球的大小*/
width: 30px;
height: 30px;
/*加载求的颜色在这里修改*/
background-color: green;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.sk-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.sk-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-three-bounce {
0%,80%,100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes sk-three-bounce {
0%,80%,100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}js 代码：
/*可以使用下面的两个语句来实现loading动画的显示和隐藏*/
$("#sk-three-bounce").hide();
$("#sk-three-bounce").show();第二种：条形
效果图如下：
源码如下：
html 代码：
<div class="sk-wave">
<div class="sk-rect sk-rect1"></div>
<div class="sk-rect sk-rect2"></div>
<div class="sk-rect sk-rect3"></div>
<div class="sk-rect sk-rect4"></div>
<div class="sk-rect sk-rect5"></div>
</div>css 代码：
.sk-wave {
position: fixed;
top: 50%;
left: 50%;
margin: 40px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
}
.sk-wave .sk-rect {
background-color: green;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-wave .sk-rect1 {
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.sk-wave .sk-rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.sk-wave .sk-rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.sk-wave .sk-rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.sk-wave .sk-rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-waveStretchDelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes sk-waveStretchDelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}Js 代码：
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
/*可以使用下面的两个语句来实现loading动画的显示和隐藏*/
$("#sk-three-bounce").hide();
$("#sk-three-bounce").show();
})
</script>福利：
一般使用加载动画的话，都需要用到一个功能，叫做遮掩。下面直接贴带
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style>
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
outline: 0;
-webkit-overflow-scrolling: touch;
background-color: rgb(0, 0, 0);
filter: alpha(opacity=60);
background-color: rgba(0, 0, 0, 0.6);
z-index: 1;
}
.test{
position:fixed;
width:200px;
height:200px;
background-color:red;
z-index:9999;
}
</style>
<body>
<div class="test">
我来测试一下是否真的实现遮掩效果！！！
</div>
<div class="modal" style="display: block;"></div>
</body>
</html>