<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<style>
   body{
       margin:0;
   }
   #progress {
       position:fixed;
       height: 2px;
       background:#2085c5;
       transition:opacity 500ms linear
   }
   #progress.done {
       opacity:0
   }
   #progress span {
       position:absolute;
       height:2px;
       -webkit-box-shadow:#2085c5 1px 0 6px 1px;
       -webkit-border-radius:100%;
       opacity:1;
       width:150px;
       right:-10px;
       -webkit-animation:pulse 2s ease-out 0s infinite;
   }

   @-webkit-keyframes pulse {
       30% {
           opacity:.6
       }
       60% {
           opacity:0;
       }
       100% {
           opacity:.6
       }
   }
</style>

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

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
	$(function(){
		$({property: 0}).animate({property: 100}, {
		                duration: 3000,
		                step: function() {
		                    var percentage = Math.round(this.property);

		                    $('#progress').css('width',  percentage+"%");

		                     if(percentage == 100) {
		                            $("#progress").addClass("done");//完成，隐藏进度条
		                        }
		                }
		});
	})
</script>
</body>
</html>

　　

css3 实现加载滚动条效果的更多相关文章

  1. CSS3实现加载中效果

    代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <tit ...

  2. CSS3实现的图片加载动画效果

    来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...

  3. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  4. JS 判断滚动底部并加载更多效果。。。。。。。。。

    JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...

  5. jQuery8种不同的瀑布流懒加载loading效果

    优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果  在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...

  6. 一个很酷的加载loading效果--IT蓝豹

    一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view, 本例子主要由以下几点构成 (1):RotateAnimation实现叶子旋转 ...

  7. Ladda – 把加载提示效果集成到按钮中，提升用户体验

    Ladda 是一组集成了加载提示的按钮,以弥合行动和反馈之间的时间间隔,提供更好的功能使用体验.主要用于在用户点击提交之后,向用户提供即时的反馈,让他们知道浏览器正在处用户提交的任务. 您可能感兴趣的 ...

  8. QImage与QPixmap加载图片效果（QImage不能拉伸图片，QPixmap默认拉伸图片）

    QImage与QPixmap加载图片 效果 . 分类: QT开发 qtQtQT PixmapTest::PixmapTest(QWidget *parent) : QDialog(parent) {t ...

  9. php+ajax实现登录按钮加载loading效果

    php+ajax实现登录按钮加载loading效果,一个提高用户体验,二个避免重复提交表单,ajax判断加载是否完成. 登录表单 <form onsubmit="return chec ...

随机推荐

  1. Qt 学习之路问题

    Qt5 cannot include the file QMainWindow add "greaterThan(QT_MAJOR_VERSION, 4): QT += widgets&qu ...

  2. RIP协议的配置

    拓扑图: 要求: 理解RIP协议的工作原理,并通过 RIP 路由协议实现不同网络互通. 配置步骤: 1.配置好 PC 机的 IP 地址等參数. PC 0>ipconfig IP Address. ...

  3. Windows下使用python绘制caffe中.prototxt网络结构数据可视化

    准备工具: 1. 已编译好的pycaffe 2. Anaconda(python2.7) 3. graphviz 4. pydot  1. graphviz安装 graphviz是贝尔实验室开发的一个 ...

  4. 详细图解mongodb下载、安装、配置与使用

    记得在管理员模式下运行CMD,否则服务将启动失败 转载:http://blog.csdn.net/boby16/article/details/51221474 详细图解,记录 win7 64 安装m ...

  5. django 笔记16 文件上传笔记

    views.py文件 def upload_file(request): username = request.POST.get('username') fafafa = request.FILES. ...

  6. [Swift] 随机数 | Random numbers

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. Swift学习笔记（1）：基础部分

    目录: 分号 常量和变量 数据类型 数值型类型转换 类型别名 元组 可选类型 API版本检查 分号 Swift并不强制要求你在每条语句的结尾处使用分号( ; ),你也可以按照自己的习惯添加分号.如果在 ...

  8. AngularJs轻松入门（一）创建第一个应用

    AngularJs是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web ...

  9. JavaScript 获取移动设备的型号

    https://joyqi.com/javascript/how-to-detect-mobile-devices-model-using-javascript.html?utm_source=too ...

  10. webpack的理解

    webpack是一个模块打包工具,你可以使用webpack管理你的模块依赖,并编译输出模块们所需要的静态文件.它能够很好的管理.打包Web开发中所用到的HTML.Javascript.CSS以及各种静 ...