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

效果：

加载效果.gif

html:

加载效果

.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);

}

}

(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);