html5 bingo制作,demo5.html

进度条5

*{ margin:0; padding:0;}

.loading{width: 100%; height: 100%; position: fixed; top:0; left: 0; z-index: 100; background-color: #fff;}

.loading .pic{width: 100px; height: 100px; position: absolute; top:0; bottom: 0; left:0; right:0; margin: auto; font-size: 30px; text-align: center; line-height: 100px;}

.loading .pic span{display: block; width: 80px; height: 80px; position: absolute; top:10px; left:10px; border-radius: 50%; box-shadow: 0 3px 0 #666; -webkit-animation: rotate 1s infinite linear; animation: rotate 1s infinite linear;}

@-webkit-keyframes rotate {

0%{-webkit-transform: rotate(0deg);}

100%{-webkit-transform: rotate(360deg);}

}

@keyframes rotate {

0%{transform: rotate(0deg);}

100%{transform: rotate(360deg);}

}

$(function () {

var img = $("img");

var num = 0;

img.each(function (i) {

var oImg = new Image();

oImg.οnlοad=function () {

// oImg.onload = null;

num++;

$(".loading b").html(parseInt(num/$("img").size()*100)+"%");

if(num==img.length){

// $(".loading").fadeOut();

}

}

oImg.src=img[i].src;

})

})

0%

一键复制

编辑

Web IDE

原始数据

按行查看

历史