<!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. iOS: 音效和音乐的播放，封装的工具类

    在iOS中音频播放从形式上可以分为音效播放和音乐播放.前者主要指的是一些短音频播放,通常作为点缀音频,对于这类音频不需要进行进度.循环等控制.后者指的是一些较长的音频,通常是主音频,对于这些音频的播放 ...

  2. Informatica 常用组件Lookup之二 已连接和未连接的查找

    可以配置一个已连接的查找转换,以从映射管道中直接接收输入:您也可以配置一个未连接的查找转换,以从其它转换的表达式结果中接收输入. 已连接的查找 未连接的查找 直接从管道接收输入值. 从其它转换的 :L ...

  3. Eclipse 中java跨工程调用类

    在Eclipse中,有时候需要跨工程调用其他工程中的方法.如下面有两个Java Project : 如果要在A工程中调用B工程中的类,可以将B工程添加到A工程中: A---- >Build Pa ...

  4. iOS开发-Get请求，Post请求，同步请求和异步请求

    标题中的Get和Post是请求的两种方式,同步和异步属于实现的方法,Get方式有同步和异步两种方法,Post同理也有两种.稍微有点Web知识的,对Get和Post应该不会陌生,常说的请求处理响应,基本 ...

  5. Android组件之BroadCast简单实践

    作为Android的四大组件之一,没有理由不介绍一下BroadCast,BroadCast中文简单翻译就是广播,前阵子浙江某大学的啦啦操,广场舞的大妈,其中大妈和学生从喇叭和音响上听到的声音就是事件源 ...

  6. C#版查杀本地/远程进程工具

    xkill [原创] Author: R&S E-mail: yrwithsh@vip.sina.com HomePage: fz5fz.yeah.net Date: 10/04/2003 u ...

  7. 记录C#错误日志工具

    在编程过程中,我们经常会用try...catch处理可能出错的代码块.如果程序出现错误,则直接show出错误信息. 当然,大型的系统都有错误日志处理模块,用数据库记录错误日志信息,有相应的写入错误日志 ...

  8. IOS开发-提升app性能的25条建议和技巧

    前言 这篇文章介绍了作者开发工作中总结的25个iOS开发tips, 多年之前读过这篇文章.收益良多,基本每一个tips在我的应用开发过程中都使用过.今天把这篇文章又一次整理转发下,与大家一起学习,不论 ...

  9. Spark性能优化：数据倾斜调优

    前言 继<Spark性能优化:开发调优篇>和<Spark性能优化:资源调优篇>讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后,本文作为<Spark性能优化 ...

  10. WordPress后台的文章、分类，媒体，页面，评论,链接等所有信息中显示ID并将ID设置为第一列

    WordPress后台默认是不显示文章.分类等信息ID的,查看起来非常不方便,不知道Wp团队出于什么原因默认不显示这个但可以使用Simply Show IDs插件来实现 不使用插件,其他网友的实现: ...