Jquery+HTML5实现进度条加载特效

最新推荐文章于 2024-12-30 14:03:16 发布

转载最新推荐文章于 2024-12-30 14:03:16 发布 · 840 阅读

文章标签：

#HTML5 #jQuery

前端专栏收录该内容

2 篇文章

订阅专栏

首先非常感谢网友舞影凌风的无私分享，此Jquery特效是用HTML5实现进度条加载，只一种非常实用的功能，很多网站上都可以用得上，配合Jquery的动画插件实现了进度加载时百分比的滑动效果，代码非常少，只有几句，页面使用时只调用loading()方法即可，加载完之后可以设置跳转的页面。

核心代码如下：

function loading(percent){
$('.progress span').animate({width:percent},1000,function(){
$(this).children().html(percent);
if(percent=='100%'){
$(this).children().html('加载完成,正在转向首页...    ');
setTimeout(function(){
$('.container').fadeOut();
location.href="http://www.jq-school.com";
},1000);
}
})
}