本文主要介绍HTML5进度条的特殊效果，需要的朋友可以参考一下。





请使用支持HTML5的浏览器来查看这种特殊效果。


复制代码代码如下所示：




HTML5与众不同的进度条


{体
背景：# 111；
颜色：白色；
}
{颜色：白色；}
帆布{
# 111背景；
边境：1px solid # 171717；
显示块；
左：50%；
保证金：- 00 - 201px 51px；
位置：绝对；
顶部：50%；
}




============================================== / * * /
*轻型装载机
================================================== / * * /
无功lightloader =函数（C，CW，CH）{
无功_this =这；
这个，C = C；
this.ctx = c.getcontext（二维的）；
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；
======================================================== / * * /
/ *初始化
======================================================== / * * /
this.init =函数（）{
This.loop（）；
}；
======================================================== / * * /
*实用功能
======================================================== / * * /
this.rand =功能（RMI，RMA）{ return ~ ~（（Math.random（）*（RMA - RMI + 1））+ RMI）；}；
this.hittest =功能（X1，Y1，W1，H1，X2，Y2、W2、H2）{ return！（X1 + W1 + W2 | | X2 X1 X2 < < < | | | | Y1 Y2 Y2 + H2 + H1＜Y1）；}；
======================================================== / * * /
*更新程序
======================================================== / * * /
this.updateloader =函数（）{
如果（this.loaded＜100）{
this.loaded = this.loaderspeed；
{ { { }
this.loaded = 0；
}
}；
======================================================== / * * /
*使装载机
======================================================== / * * /
this.renderloader =函数（）{
this.ctx.fillstyle =000#；
This.ctx.fillRect（本。装载机。X，这。装载机。Y，this.loaderwidth，这个loaderheight）；
this.hue = this.huestart +（this.loaded / 100）*（this.hueend这。huestart）；
无功newwidth =（this.loaded / 100）* this.loaderwidth；
this.ctx.fillstyle = 'hsla（+ this.hue +，100%，40%，1）；
This.ctx.fillRect（本。装载机。X，这。装载机。Y，newwidth，这个loaderheight）；
this.ctx.fillstyle =222#；
This.ctx.fillRect（本。装载机。X，这。装载机。Y，newwidth，this.loaderheight / 2）；
}；
======================================================== / * * /
粒子
======================================================== / * * /
这个粒子=函数（）{
这个X = _this。装载机。x +（（_this.loaded / 100）* _this。loaderwidth _this.rand）-（0, 1）；
这个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 =功能（我）{
this.vx =（_this.rand（0, 6）- 3 / 100）；
this.vy = _this.gravity；
这this.vx x =；
这this.vy Y =；
如果（这。y > _this。CH）{
_this.particles.splice（I，1）；
}
}；
this.particle.prototype.render =函数（）{
_this.ctx.fillstyle = 'hsla（+ this.hue +，+ 100%，_this.rand（50, 70）+，+ _this.rand（20, 100）/ 100 +）；
（这_this.ctx.fillrect。X，Y，这this.width，这个高度）；
}；
This.createParticles = function () {
var i = this.particlerate；
当（i）{
This.particles.push（新的粒子（））；
}；
}；
this.updateparticles =函数（）{
var i = this.particles.length；
当（i）{
var =这个。粒子{ }；
p.update（我）；
}；
}；
this.renderparticles =函数（）{
var i = this.particles.length；
当（i）{
var =这个。粒子{ }；
P.render（）；
}；
}；
======================================================== / * * /
*明确的帆布
======================================================== / * * /
this.clearcanvas =函数（）{
this.ctx.globalcompositeoperation = 'source-over；
this.ctx.clearrect（0, 0，this.cw，这个CH）；
this.ctx.globalcompositeoperation = 'lighter；
}；
======================================================== / * * /
*动画循环
======================================================== / * * /
this.loop =函数（）{
无功loopit =函数（）{（）
RequestAnimationFrame（loopit，_this。C）；
_this.clearcanvas（）；
_this.createparticles（）；
_this.updateloader（）；
_this.updateparticles（）；
_this.renderloader（）；
_this.renderparticles（）；
}；
loopit（）；
}；
}；
======================================================== / * * /
检查画布/支持
======================================================== / * * /
无功iscanvassupported =函数（）{（）
var elem = document.createelement（'canvas）；
返回！！（elem.getcontext elem.getcontext（二维的））；
}；
======================================================== / * * /
*安装requestanimationframe
======================================================== / * * /
无功setupraf =函数（）{（）
VAR次= 0；
VAR供应商= { 'ms '，'moz '，'webkit，O }；
对于（var x = 0；x＜vendors.length！window.requestanimationframe；+ + x）{
window.requestanimationframe =窗口{供应商{X} + 'requestanimationframe}；
window.cancelanimationframe =窗口{供应商{X} + 'cancelanimationframe} + 'cancelrequestanimationframe}窗口{供应商{X} | |；
}；
如果（！窗口。requestanimationframe）{
window.requestanimationframe =函数（回调，元）{
无功currtime =新的日期（）GetTime（）；
无功timetocall = math.max（0, 16 -（currtime -一））；
var id = window.settimeout（function（）{回调（currtime + timetocall）；}，timetocall）；
一currtime + timetocall =；
返回ID；
}；
}；
如果（！窗口。cancelanimationframe）{
window.cancelanimationframe =功能（ID）{
ClearTimeout（ID）；
}；
}；
}；
======================================================== / * * /
画布和初始化/定义
======================================================== / * * /
如果（iscanvassupported）{
var c = document.createelement（'canvas）；
c.width = 400；
c.height = 100；
无功连续= c.width；
VaR CH = c.height；
document.body.appendchild（C）；
VaR CL =新lightloader（C，CW，CH）；
SetupRAF（）；
Cl.init（）；
}



HTML5的进度条
请使用支持HTML5的浏览器查看此页。