效果：
加载效果.gif
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加载效果</title>
</head>
<style>
.loading {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 999;
font-size: 20px;
background-color: #fff;
}
.loading.active {
-webkit-animation: fadeAnim 0.3s forwards ease-in-out;
animation: fadeAnim 0.3s forwards ease-in-out;
}
.load {
width: 100px;
height: 100px;
position: absolute;
text-align: center;
top: 40%;
left: 50%;
margin-left: -20px;
}
.load-text {
color: #099607;
font-size: 40px;
margin-top: 108px;
display: inline-block;
}
.load-cell1,
.load-cell2 {
width: 100%;
height: 100%;
border-radius: 100px;
-webkit-border-radius: 100px;
border: 3px solid #fff;
background-color: #099607;
top: 0;
left: 0;
opacity: 0.6;
position: absolute;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.load-cell2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes fadeAnim {
from {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes fadeAnim {
from {
opacity: 1
}
to {
opacity: 0
}
}
@-webkit-keyframes bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
@keyframes bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body>
<div class="loading" id="Js_load">
<div class="load">
<div class="load-cell1"></div>
<div class="load-cell2"></div>
<span class="load-text j_loadtext"></span>
</div>
</div>
<script type="text/javascript">
(function(window, undefined) {
//loading
var loader = document.getElementById("Js_load"),
bar = loader.querySelector(".j_loadtext"),
num = 0,
time = 0,
state = true;
//加载完成
function loadOk() {
if (state) {
state = false;
bar.innerHTML = "100%";
loader.className = "loading active";//加到100%后，关闭加载效果
setTimeout(function() {
loader.style.display = "none";
}, 500);
}
}
var timer = setInterval(function() {
num = parseInt(num + Math.random() * 10, 10);
time++;
if (num > 90) {
num = 90;
} else {
bar.innerHTML = num + "%";
}
if (time > 10) {
clearInterval(timer);
loadOk();
}
}, 1000);
window.onload = function() { //页面加载完成后，关闭加载效果
loadOk();
};
})(window);
</script>
</body>
</html>
