html做出加载百分比效果,js 实现加载百分比效果

加载效果

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: fadeAnim0.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: bounce2.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);

}

}

var loader = document.getElementById("Js_load"),

bar= loader.querySelector(".j_loadtext"),

num= 0,

time= 0,

state= true;//加载完成

functionloadOk() {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.οnlοad= function() { //页面加载完成后，关闭加载效果

loadOk();

};

})(window);