<!Doctype html>

 <html>

 <head>

 <title>页面顶部显示的进度条效果</title>

 <meta http-equiv=Content-Type content="text/html;charset=utf-8">

 </head>

 <body>

 <div id="web_loading"><div></div></div>

 <script src="http://files.cnblogs.com/ningvsban/jquery1.8.3.min.js" type="text/javascript"></script>

 <script type="text/javascript">// < ![CDATA[

     jQuery(document).ready(function(){

         jQuery("#web_loading div").animate({width:"100%"},800,function(){

             setTimeout(function(){jQuery("#web_loading div").fadeOut(500);

             });

         });

     });

 // ]]></script>

 <style>

 #web_loading{

 z-index:99999;

 width:100%;

 }

 #web_loading div{

 width:0;

 height:5px;

 background:#FF9F15;

 }

 </style

 </body>

 </html>

效果：

　　请看本博客首页效果http://www.cnblogs.com/ningvsban/

【jQuery】页面顶部显示的进度条效果的更多相关文章

  1. 【原生JS插件】LoadingBar页面顶部加载进度条

    先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

  2. JQuery实战——页面进度条效果

    今早逛阮一峰大神的博客 ECMAScript 6 入门 时候看到页面顶部有个进度条显示当前浏览的进度,如图: 顶部进度条会根据当前页面高度进行宽度调整,实战一番,视觉使用animated方法实现.下面 ...

  3. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  4. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  5. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  6. CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

  7. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  8. react封装简单的浏览器顶部加载进度条全局组件

    在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...

  9. ASP.NET实现进度条效果【转】

     原文地址:http://www.jb51.net/article/115310.htm 这篇文章主要为大家详细介绍了ASP.NET实现简单的进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一 ...

随机推荐

  1. @JVM新一代的垃圾回收算法

    垃圾回收的瓶颈 传统分代垃圾回收方式,已经在一定程度上把垃圾回收给应用带来的负担降到了最小,把应用的吞吐量推到了一个极限.但是他无法解决的一个问题,就是Full GC所带来的应用暂停.在一些对实时性要 ...

  2. 不错网络性能相关的文章-BaiduRPC

    http://wiki.baidu.com/display/RPC/Threading+Overview#ThreadingOverview-单线程reactor Threading Overview ...

  3. C语言文件打开方式及说明

    ANSI C规定文件打开用函数fopen,关闭为fclose. 1.调用方式通常为: FILE *fp; fp=fopen(文件名, 打开方式);   2.参数说明: 文件名: 形如"myf ...

  4. 最小均方算法（LMS Algorithm）理论及DSP实现

    LMS算法可认为是机器学习里面最基本也比较有用的算法,神经网络中对参数的学习使用的就是LMS的思想,在通信信号处理领域LMS也非常常见,比如自适应滤波器. 本文主要对LMS(Least Mean Sq ...

  5. php解决乱码问题时,出现Cannot modify header information问题的解决方法

    设置页面编码使用: header("Content-Type:text/html;charset=utf-8"); 会出现:Cannot modify header informa ...

  6. CSS 过滤器 兼容ie，火狐和谷歌

    这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器. 关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个 ...

  7. 虚拟机配置Cognos报错CFG-ERR-0106

    在虚拟机中安装Cognos 之后,启动了好多次,都启动失败,如下图所示,错误如下图所示 已确保已下信息设置正确 1:内容库配置OK 2:Java_home OK 3:字符集OK ----------- ...

  8. Learning How To Code Neural Networks

    原文:https://medium.com/learning-new-stuff/how-to-learn-neural-networks-758b78f2736e#.ly5wpz44d This i ...

  9. 在ubuntu下手机无法挂载的问题

    在ubuntu下手机无法挂载的问题 , 原因之一是,usb数据线连接在了机箱前面,可以尝试连接到机箱后面的USB接口试试,我当时遇到过这样的情况,这样解决的.

  10. 关于ARM立即数的理解

    转自:http://blog.sina.com.cn/s/blog_9bad4f090101e14d.html 一.立即数指令码的组成 ARM公司将32bit指令码分为如下两部分: 32bit立即数通 ...