<!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. C++ Primer笔记13_运算符重载_总结

    总结: 1.不能重载的运算符: . 和 .* 和 ?: 和 ::  和 sizeof 和 typeid 2.重载运算符有两种基本选择: 类的成员函数或者友元函数, 建议规则例如以下: 运算符 建议使用 ...

  2. hdu 4771 求一点遍历全部给定点的最短路（bfs+dfs）

    题目如题.题解如题. 因为目标点最多仅仅有4个,先bfs出俩俩最短路(包含起点).再dfs最短路.)0s1A;(当年弱跪杭州之题,现看如此简单) #include<iostream> #i ...

  3. 用Go语言写了一个电脑搜索文件的小东西

    package main import ( "bytes" "fmt" "os" "os/exec" "pat ...

  4. js面向对象编程：怎样定义常量？

    js中有一个keywordconst,但眼下的浏览器似乎还不支持,假设一定要定义一些常量,事实上能够使用闭包,匿名函数实现常量的定义. 比如: var Class = (function() { va ...

  5. 树莓派安装node.js

    因为树莓派是arm架构,node.js上并没有提供arm架构的二进制包下载. 试过使用apt包管理安装和直接node.js源代码编译安装(编译了四五个小时...),都没有成功,报非法指令错误,预计还是 ...

  6. BZOJ5042: LWD的分科岛

    [传送门:BZOJ5042] 简要题意: 给出n个数,q个询问,每个询问输入opt,l,r,如果opt=1,则输出l到r中的最小值,否则输出最大值 题解: 直接上ST表,自信一波,结果 MLE??好吧 ...

  7. Android jni 二维数组 传递

    学习Android Jni时,一个二维 整数 数组的传递花了我好长时间,在网上查的资料都不全,当然最后是成功了,写在这里是为了自己记住,当然有人搜索到并利用了我会很高兴.   in Android J ...

  8. Filenames and paths

    Files are organized into directories (also called ‘folders’). Every running program has a ‘current d ...

  9. Laravel-自定全局函数

    Laravel-自定全局函数 标签(空格分隔): php 习惯了 使用 ThinkPHP 框架,有一个公共方法类在代码编写上会快捷很多,所以有必要在此进行配置一番. 实现 在 app 创建文件夹 He ...

  10. PostgreSQL Replication之第四章 设置异步复制（2）

    4.2 配置级联复制 正如您在本章已经看到的,设置流复制真的很容易.只需要设置几个参数,做一个基础备份,并享受您的复制设置. 在许多情况下,这种情况更有一点点微妙.在这个例子中我们假设:我们要使用一个 ...