纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)


Posted in HTML / CSS onApril 16, 2014

一、纯CSS实现

昨天在网上闲逛时,看到一个博客的页面最顶部有一个进度条特效,感觉挺好的,就分析了一下代码,找出了其中的关键部份,使用纯CSS实现的,给大家分享一下。

复制代码
代码如下:

<style type="text/css">
body{ margin:0; padding:0;}
@-moz-keyframes progressing {
0% {
width:0px;
}
100% {
width:100%;
}
}
@-webkit-keyframes progressing {
0% {
width:0px;
}
100% {
width:100%;
}
}
.progress {
width:100%;
height:5px;
overflow:hidden;
background-color:#27ccc0;
position:fixed;
top:0;
left:0;
z-index:9;
-moz-animation:progressing 2s ease-out;
-webkit-animation:progressing 2s ease-out;
}
</style>
<p class="progress"></p>

二、JQuery实现

一个在页面顶部显示的进度条效果,像在智能手机上浏览网页一样,手机上的浏览器进度条一般都在屏幕顶部,一条极细的小线条,当页面加载的时候,它就不断的加载显示进度,本网页进度条特效与此十分相似,基于jquery插件实现的效果。

复制代码
代码如下:

<title>页面顶部显示的进度条效果</title>
<div id="web_loading"><div></div></div>
<script src="/ajaxjs/jquery-1.7.2.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>
HTML / CSS 相关文章推荐
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 #HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 #HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 #HTML / CSS
css3新增颜色表示方式分享
Apr 15 #HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 #HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 #HTML / CSS
css3发光搜索表单分享
Apr 11 #HTML / CSS
You might like
ThinkPHP中where()使用方法详解
2016/04/19 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
JS定时器实例
2013/04/17 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
Vue点击切换颜色的方法
2018/09/13 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
JS实现长图上下滚动效果
2020/03/19 Javascript
Python类定义和类继承详解
2015/05/08 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
Python 多进程、多线程效率对比
2020/11/19 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
护士思想汇报
2014/01/12 职场文书
读书活动实施方案
2014/03/10 职场文书
大学生学期个人总结
2015/02/12 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
Vue3中的Refs和Ref详情
2021/11/11 Vue.js