<!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. linux操作---cd

    cd命令用于切换工作路径,格式是cd [选项][参数]: [选项] -p  如果切换的工作目录是一个符号连接,直接切换到符号连接指向的目标目录: -L  如果切换的工作目录是一个符号连接,直接切换到符 ...

  2. 紫书 例题8-5 UVa11054（等价转换）

    这道题用到了等价转换的思想 所有要运到a1的酒, 都要经过a2, 所以不如把a2的值改成a1+a2,然后依次以此类推. #include<cstdio> #include<cmath ...

  3. Qt之字典划词

    简述 相信大家都用过词典吧!因为英语不太好...O(∩_∩)O~,所以经常进行划词翻译! 简述 实现 效果 源码 更多参考 实现 原理:鼠标移至某单词之上,获取鼠标位置,然后在对应位置进行取词,翻译! ...

  4. [Angular] Configure an Angular App at Compile Time with the Angular CLI

    Compile time configuration options allow you to provide different kind of settings based on the envi ...

  5. Linux环境安装phpredis扩展

    php訪问redis须要安装phpredis扩展.phpredis是用纯C语言写的. phpredis下载地址 https://github.com/phpredis/phpredis 最新的版本号是 ...

  6. 微信iOS SDK文档总结

    至今共19个类.分3大类. (1)请求与响应类:微信终端和第三方程序:第三方程序和微信server. BaseReq:全部请求类的基类. GetMessageFromWXReq:微信终端向第三方程序请 ...

  7. 2、java注释、标识符、数据类型、类型转换

    一.三种注释:单行注释.多行注释.文档注释(只能在类前或者方法前,@author作者) 二.java使用的编码为unicode码[0-65535]   包含ASCII码,在0-255中 ASCII码( ...

  8. xml布局内容总结（四）--Android

    (1)对于xml编写界面较复杂的情况下,使用include会使得编写和查看更清楚 <LinearLayout             android:layout_width="mat ...

  9. angularjs 缓存 $q

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  10. luoguP1419 寻找段落(二分答案+单调队列）

    题意 给定一个长度为n的序列a1~an,从中选取一段长度在s到t之间的连续一段使其平均值最大.(n<=100000) 题解 二分答案平均值. judge时把每一个a[i]-mid得到b[i] 在 ...