<!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. caioj 1114 树形动态规划（TreeDP）3.0：多叉苹果树【scy改编ural1018二叉苹果树】

    一波树上背包秒杀-- #include<cstdio> #include<cstring> #include<algorithm> #include<vect ...

  2. 紫书 例题8-10 UVa 714 （二分答案）

    这道题让最大值最小, 显然是二分答案 当题目求的是最大值最小, 最小值最大, 这个时候就要想到二分答案 为什么可以二分答案呢, 因为这个时候解是单调性的, 如果简单粗暴一点 就全部枚举一遍, 验证答案 ...

  3. 怎么给Unity写一个原生的插件

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50266889 作者:car ...

  4. mysql-通过例子解释四种隔离级别

    SQL标准定义了4种隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的. 低级别的隔离级一般支持更高的并发处理,并拥有更低的系统开销. 首先,我们使用 test 数据库, ...

  5. RabbitMQserver配置文件

    RabbitMQ的server配置设置.我做了改动,改动例如以下: {tcp_listeners, [5672]}, {loopback_users, ["elite"]} 其他的 ...

  6. IIS Express加入MIME映射

    近期在用Grid Report做Web报表的时候,碰到一件非常挠头的事. 本地用VS2010写的代码,调试的时候Web报表无法显示,用24.248server上VS2013相同仍是无法显示.最后把项目 ...

  7. MYSQL源代码编译的变动

    Mysql的安装,对于mysql不同版本号的mysql源代码编译方式不一样 5.6.2的版本号開始编译方式已经由 configure 变成了cmake方式 ,相关的新的 编译方式在mysql官网已经提 ...

  8. Hadoop - YARN NodeManager 剖析

    一 概述         NodeManager是执行在单个节点上的代理,它管理Hadoop集群中单个计算节点,功能包含与ResourceManager保持通信,管理Container的生命周期.监控 ...

  9. hdu_1166,线段树单点更新

    在刷线段树,参考自http://www.notonlysuccess.com/index.php/segment-tree-complete/ #include<iostream> #in ...

  10. 从Git里拉取远程的所有分支

    从Git里拉取远程的所有分支 git branch -r | grep -v '\->' | while read remote; do git branch --track "${r ...