预加载
<!--预加载-->
<div class="preload">
<div class="prezoom">
<div class="outer-circle"></div>
<div class="inner-circle"></div>
</div>
<div class="load">
<div class="pie1"></div>
<div class="pie2"></div>
<div class="thumb">
<img src="data:images/load_03.png" alt="">
</div>
</div>
<div class="percentage">
<span class="num"></span>%
</div>
</div>
css:
@keyframes outer-circle {
0% {
transform: scale(1)
}
50% {
transform: scale(.8)
}
100%{
transform: scale(1)
}
}
@-webkit-keyframes outer-circle {
0% {
-webkit-transform: scale(1)
}
50% {
-webkit-transform: scale(.8)
}
100% {
-webkit-transform: scale(1)
}
}
.preload {
z-index: ;
position: absolute;
top: ;
left: ;
width: %;
height: %;
background: #fff;
}
.preload .load .thumb {
position: absolute;
margin: -45px;
overflow: hidden;
left: %;
top: %;
background-color: #fff;
z-index:
}
.preload .load{ opacity: ; animation: fadeInNormal 1000ms ease 600ms both running;}
.preload .load .thumb ,.preload .load .thumb img {
width: 90px;
height: 90px;
border-radius: 90px;z-index: ;
animation: zoomIn 1000ms ease both running;
}
.preload .load .pie1,.preload .load .pie2 {
z-index: ;
position: absolute;
width: 110px;
height: 110px;
margin: -55px;
clip: rect(,55px,110px,);
border-radius: 110px;
left: %;
top: %;
border: none;
opacity: 0.5;
animation: fadeInNormal 1000ms ease both running;
}
.preload .load .pie1 {
background: #172b7d;
z-index:
}
.preload .load .pie2 {
background:#fff;
z-index:
}
.preload .prezoom .inner-circle,.preload .prezoom .outer-circle {
position: absolute;
border-radius: 140px;
background: #afe4dd;
left: %;
top: %
}
.preload .prezoom .inner-circle {
width: 30px;
height: 30px;
margin: -15px
}
.preload .prezoom .outer-circle {
width: 140px;
height: 140px;
margin: -70px;
opacity: .;
z-index: ;
animation: outer-circle 2s infinite;
-moz-animation: outer-circle 2s infinite;
-webkit-animation: outer-circle 2s infinite;
-o-animation: outer-circle 2s infinite
}
.preload .percentage {
top: %;
margin-top: 60pt;
}
.preload .mark,.preload .percentage {
position: absolute;
width: %;
height: 10px;
font-size: 10px;
text-align: center;
color: #b4b4b4
}
js
function loadImg(){
var imgPath ='http://www.calc.com.hk/Cards/HRshow/images/';
var loadingPage = (function () {
var imgSources = ['bj.jpg','conbj.jpg', 'load_03.png', 'arr.png', 'page01_03.png', 'page01_07.png', 'page3pic_03.png', 'page3pic_07.png', 'page04_03.png', 'Touch4.png'];
for (var i = ; i < imgSources.length; i++) {
imgSources[i] = (imgPath + imgSources[i]);
};
var loadImage = function (path, callback) {
var img = new Image();
img.onload = function () {
img.onload = null;
callback(path);
}
img.src = path;
}
var imgLoader = function (imgs, callback) {
var len = imgs.length, i = ;
while (imgs.length) {
loadImage(imgs.shift(), function (path) {
callback(path, ++i, len);
})
}
}
var percent = ;
imgLoader(imgSources, function (path, curNum, total) {
percent = parseInt(curNum / total*) ;
$(".percentage .num").html(percent);
var dega = percent *3.6;
>= dega && dega >= ? $(".pie1").css({transform: "rotate(" + dega + "deg)"}) : >= dega && dega > && ($(".pie1").css({
transform: "rotate(180deg)"
}), $(".pie2").css({
"border-radius": "155px",
background: "rgba(23, 43, 125, 1)",
transform: "rotate(" + dega + "deg)"
})), $(".percentage").find(".num").html();
if (percent == ) {
setTimeout(function () {
$('.preload').animate({
opacity:
}, , function() {
$(this).remove();
$(".contentcon").css("display","block");
$(".u-globalAudio").css("display","block");
})
}, );
}
});
})();//end
}