查看效果: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. PHP 基础知识测试题 答案分析

    一:选择题(单项选择,每题2分): 1． LAMP具体结构不包含下面哪种(A      ) A:Windows系统              如果是这个就是WMP B:Apache服务器 C:MySQ ...

  2. SikuliX简介及安装

    一.简单介绍 SikuliIDE和Sikuli Script就是现在的SikuliX,最新版本是SikuliX1.1.0, 部分兼容Sikuli JAVA API,支持Python和Ruby,Siku ...

  3. Vue脚手架工具vue-cli和调试组件vue-devtools

    https://github.com/vuejs/vue-cli npm install vue-cli -g vue init webpack my-project cd my-project // ...

  4. 调用Child Package

    使用Execute Package Task,能够在一个package中调用并执行其他package,被调用的Package称作 Child Package,Execute Package Task ...

  5. OPEN CASCADE Gauss Least Square

    OPEN CASCADE Gauss Least Square eryar@163.com Abstract. The least square can be used to solve a set ...

  6. OPEN CASCADE BSpline Curve Interpolation

    OPEN CASCADE BSpline Curve Interpolation eryar@163.com Abstract. Global curve interpolation to point ...

  7. C# 一个页面，多个Updatepannel，多个Timer

    这几天在搞一个项目,其中一个页面里面有好几组数据要定时刷新,但是,每一组数据要刷新的时间不一样,所以就需要用到多个定时器.本人刚工作不久,对Js 的Ajax不太了解,反而对微软的那个Ajax相对了解一 ...

  8. 高级javascript---模块化编程

    随着网站逐渐变成“互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者不得不使用软 ...

  9. EntityFramework 7 Left Join Where is error(Test record)

    First of all, my English is very poor, so I may not be a very good expression, very sorry! In this b ...

  10. es6分享——变量的解构赋值

    变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法 ...