查看效果:http://keleyi.com/keleyi/phtml/html5/26.htm

完整代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset='UTF-8'>

 <title>HTML5有特色的进度条-柯乐义</title>

 <base target="_blank" />

 <style>

 body {

 background: #111;

 color:White;

 }

 a{color:White;}

 canvas {

 background: #111;

 border: 1px solid #171717;

 display: block;

 left: 50%;

 margin: -51px 0 0 -201px;

 position: absolute;

 top: 50%;

 }

 </style>

 </head>

 <body>

 <script type="text/javascript">

 /*==================keleyi.com============================*/

 /* Light Loader

 /*==================柯乐义================================*/

 var lightLoader = function (c, cw, ch) {

 var _this = this;

 this.c = c;

 this.ctx = c.getContext('2d');

 this.cw = cw;

 this.ch = ch;

 this.loaded = 0;

 this.loaderSpeed = .6;

 this.loaderHeight = 10;

 this.loaderWidth = 310;

 this.loader = {

 x: (this.cw / 2) - (this.loaderWidth / 2),

 y: (this.ch / 2) - (this.loaderHeight / 2)

 };

 this.particles = [];

 this.particleLift = 180;

 this.hueStart = 0

 this.hueEnd = 120;

 this.hue = 0;

 this.gravity = .15;

 this.particleRate = 4;

 /*========================================================*/

 /* Initialize

 /*========================================================*/

 this.init = function () {

 this.loop();

 };

 /*========================================================*/

 /* Utility Functions

 /*========================================================*/

 this.rand = function (rMi, rMa) { return ~ ~((Math.random() * (rMa - rMi + 1)) + rMi); };

 this.hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) { return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1); };

 /*========================================================*/

 /* Update Loader

 /*========================================================*/

 this.updateLoader = function () {

 if (this.loaded < 100) {

 this.loaded += this.loaderSpeed;

 } else {

 this.loaded = 0;

 }

 };

 /*========================================================*/

 /* Render Loader

 /*========================================================*/

 this.renderLoader = function () {

 this.ctx.fillStyle = '#000';

 this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight);

 this.hue = this.hueStart + (this.loaded / 100) * (this.hueEnd - this.hueStart);

 var newWidth = (this.loaded / 100) * this.loaderWidth;

 this.ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 40%, 1)';

 this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight);

 this.ctx.fillStyle = '#222';

 this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight / 2);

 };

 /*========================================================*/

 /* Particles

 /*========================================================*/

 this.Particle = function () {

 this.x = _this.loader.x + ((_this.loaded / 100) * _this.loaderWidth) - _this.rand(0, 1);

 this.y = _this.ch / 2 + _this.rand(0, _this.loaderHeight) - _this.loaderHeight / 2;

 this.vx = (_this.rand(0, 4) - 2) / 100;

 this.vy = (_this.rand(0, _this.particleLift) - _this.particleLift * 2) / 100;

 this.width = _this.rand(1, 4) / 2;

 this.height = _this.rand(1, 4) / 2;

 this.hue = _this.hue;

 };

 this.Particle.prototype.update = function (i) {

 this.vx += (_this.rand(0, 6) - 3) / 100;

 this.vy += _this.gravity;

 this.x += this.vx;

 this.y += this.vy;

 if (this.y > _this.ch) {

 _this.particles.splice(i, 1);

 }

 };

 this.Particle.prototype.render = function () {

 _this.ctx.fillStyle = 'hsla(' + this.hue + ', 100%, ' + _this.rand(50, 70) + '%, ' + _this.rand(20, 100) / 100 + ')';

 _this.ctx.fillRect(this.x, this.y, this.width, this.height);

 };

 this.createParticles = function () {

 var i = this.particleRate;

 while (i--) {

 this.particles.push(new this.Particle());

 };

 };

 this.updateParticles = function () {

 var i = this.particles.length;

 while (i--) {

 var p = this.particles[i];

 p.update(i);

 };

 };

 this.renderParticles = function () {

 var i = this.particles.length;

 while (i--) {

 var p = this.particles[i];

 p.render();

 };

 };

 /*========================================================*/

 /* Clear Canvas

 /*========================================================*/

 this.clearCanvas = function () {

 this.ctx.globalCompositeOperation = 'source-over';

 this.ctx.clearRect(0, 0, this.cw, this.ch);

 this.ctx.globalCompositeOperation = 'lighter';

 };

 /*========================================================*/

 /* Animation Loop 柯 乐 义

 /*========================================================*/

 this.loop = function () {

 var loopIt = function () {

 requestAnimationFrame(loopIt, _this.c);

 _this.clearCanvas();

 _this.createParticles();

 _this.updateLoader();

 _this.updateParticles();

 _this.renderLoader();

 _this.renderParticles();

 };

 loopIt();

 };

 };

 /*========================================================*/

 /* Check Canvas Support

 /*========================================================*/

 var isCanvasSupported = function () {

 var elem = document.createElement('canvas');

 return !!(elem.getContext && elem.getContext('2d'));

 };

 /*========================================================*/

 /* Setup requestAnimationFrame

 /*========================================================*/

 var setupRAF = function () {

 var lastTime = 0;

 var vendors = ['ms', 'moz', 'webkit', 'o'];

 for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

 window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];

 window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];

 };

 if (!window.requestAnimationFrame) {

 window.requestAnimationFrame = function (callback, element) {

 var currTime = new Date().getTime();

 var timeToCall = Math.max(0, 16 - (currTime - lastTime));

 var id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);

 lastTime = currTime + timeToCall;

 return id;

 };

 };

 if (!window.cancelAnimationFrame) {

 window.cancelAnimationFrame = function (id) {

 clearTimeout(id);

 };

 };

 };

 /*========================================================*/

 /* Define Canvas and Initialize

 /*========================================================*/

 if (isCanvasSupported) {

 var c = document.createElement('canvas');

 c.width = 400;

 c.height = 100;

 var cw = c.width;

 var ch = c.height;

 document.body.appendChild(c);

 var cl = new lightLoader(c, cw, ch);

 setupRAF();

 cl.init();

 }

 </script>

 <div style="position:absolute; top: 0;width:100%">

 <div class="footer-banner" style="width:728px;margin:10px auto;color:White">

 HTML5进度条<br />

 请使用<a href="http://keleyi.com/a/bjac/g039tue3.htm">支持HTML5的浏览器</a>查看本页 <a href="http://keleyi.com/a/bjad/8lva67xl.htm">原文</a></div>

 </div>

 </body>

 </html>

转载自：http://keleyi.com/a/bjad/8lva67xl.htm

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

HTML5有特色的进度条的更多相关文章

  1. 简直要逆天！超炫的 HTML5 粒子效果进度条

    我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...

  2. html5 svg 圆形进度条

    html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  3. 详解HTML5中的进度条progress元素简介及兼容性处理

    一.progress元素基本了解 1.基本知识 progress元素属于HTML5家族,指进度条.IE10+以及其他靠谱浏览器都支持. 注释:Internet Explorer 9 以及更早的版本不支 ...

  4. 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code

    最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜!   // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...

  5. HTML5圆形百分比进度条插件circleChart

    在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script&g ...

  6. html5 canvas画进度条

    这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...

  7. HTML5效果：Canvas 实现圆形进度条并显示数字百分比

    实现效果 1.首先创建html代码 <canvas id="canvas" width="500" height="500" styl ...

  8. 9个绚丽多彩的HTML5进度条动画赏析

    进度条在网页应用中越来越广泛了,特别是现在的页面异步局部刷新时代,进度条可以让用户更好的等待操作结果.本文要分享9款绚丽多彩的HTML5进度条动画,有很多还是挺实用的,效果也非常不错. 1.CSS3发 ...

  9. ajax-属性、原理、实现html5进度条上传文件

    一.远古ajax实现方式如下: 1.前端请求后台,后台设置返回 http状态码204 2.运用img图片(或css/javascript等)的加载机制,请求后台 3.post提交数据,运用iframe ...

随机推荐

  1. ASP.NET Core 1.0 静态文件、路由、自定义中间件、身份验证简介

    概述 ASP.NET Core 1.0是ASP.NET的一个重要的重新设计. 例如,在ASP.NET Core中,使用Middleware编写请求管道. ASP.NET Core中间件对HttpCon ...

  2. 【.NET深呼吸】清理对象引用，有一个问题容易被忽略

    大家知道,托管代码一个重要的特点是自动管理内存,即我们常说的垃圾回收机制,那些高大上的理论我就不重复了,有兴趣的朋友可以翻书.我这个有个毛病——不喜欢很严肃地去说一些理论的东西,所以我不多介绍了. 一 ...

  3. php语句

    判断变量的方法: 例: $a=""; var_dump(empty($a)); 输出的结果为true 若$a=10; var_dump(empty($a)); 输出falst 若没 ...

  4. ASP.NET MVC之持久化TempData及扩展方法（十三）

    前言 之前在开始该系列之前我们就讲述了在MVC中从控制器到视图传递数据的四种方式,但是还是存在一点问题,本节就这个问题进行讲述同时进行一些练习来看看MVC中的扩展方法. 话题 废话不必多说,我们直接进 ...

  5. 解决Onedrive经常无法访问的问题

    在国内经常因为各种原因访问不了OneDrive的访问,可以通过下面的方式解决 添加两个DNS记录到hosts文件(C:\Windows\System32\drivers\etc) 134.170.10 ...

  6. IOS开发之获取Storyboard创建的ViewController

    前面的两篇博客都是学习有关屏幕适配也就是相对布局的东西,这篇博客中将会学习视图间的切换.视图间的切换我们可以用代码完成或者用storyboard来建立各个视图控制器间的关系.在需要用到代码进行切换时会 ...

  7. grape动态PHP结构（二）——管理后台

    一.概述

  8. C语言 第六章 多重循环

    一.概要 在c语言中,if,switch,for,while,do-while可以相互间多次嵌套. if(){ for() { for() { } } } while() { for(){ } for ...

  9. 解读SDN的东西、南北向接口

    北向接口(Northbound Interface)是为厂家或运营商进行接入和管理网络的接口,即向上提供的接口. 南向接口(Southbound Interface)是提供对其他厂家网元的管理功能,支 ...

  10. web前端学习随笔

    为什么是随笔 好好算下来,学习web前端已有半个月了,这半个月来主要学习的是HTML和CSS部分,期间有困惑,也有解决困惑时的快感,所以想把这段时间感受到的一些东西记下来,因为内容比较杂,所以干脆叫随 ...