网页顶部加载进度条实现

来源：互联网发布：java集合框架视频教程编辑：程序博客网时间：2024/05/22 10:41

下面就是简单点实现了这个功能，不同的是进度条颜色不同。

js代码：

$({property: 0}).animate({property: 100}, {     duration: 5000,//进度条加载进度的速度     step: function() {         var percentage = Math.round(this.property);         $('#progress').css('width',  percentage+"%");         if(percentage == 100) {             $("#progress").addClass("done");//100%后消失         }     } });

css代码：

body{         margin:0; } #progress {         position:fixed;         height: 2px;         background:#b91f1f;         transition:opacity 500ms linear } #progress.done {         opacity:0 } #progress span {         position:absolute;         height:2px;         opacity:1;         width:150px;         right:-10px; }  @-webkit-keyframes pulse {         30% {                 opacity:.6         }         60% {                 opacity:0;         }         100% {                 opacity:.6         } }

html代码：

<body>         <div id="progress">                 <span><span>         <div> <body>

PS:

js代码中使用起来可以这样：在网页加载页面头部的时候：$({property: 0}).animate({property: 45} //进度条读加载到45%的位置停止
在网页接在尾部的时候：$({property: 95}).animate({property: 100} /进度条读加载到100%的位置并消失。

以上是假的加载进度效果，真是的加载进度可以使用pace.js来实现，根据不同业务也可以使用ajax的返回码来修改显示进度。相关正在整理中。

原文博客地址：http://www.yigangwu.com/index.php?m=content&c=index&a=show&catid=19&id=54 点击打开链接（含演示demo）

阅读全文

0 0