效果图：
源码：
<html>
<title></title>
<header>
<script src="jquery-1.8.0.js"></script>
<script>
$(document).ready(function(){
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var proHeight = 10;//进度条高度
var proWidth = 0.9;//进度条宽度
var proSpeed = 0.001;//进度条速度
var num = 4;//粒子数目
var bgColor = "#4f0e1d";//进度条背景色
var proColor = "#fff";//进度条进度色
var initX = canvas.width*(1-proWidth);//初始X坐标
var initY = (canvas.height-proHeight)/2;//初始Y坐标
var currentX = initX;//当前进度x坐标
var scale = 1-proWidth;
function drawBgProgress(){
ctx.beginPath();
ctx.arc(initX,initY,proHeight/20,Math.PI*0.5,Math.PI*1.5,false);
ctx.moveTo(initX,initY);
ctx.lineTo(canvas.width*proWidth,initY);
ctx.arc(canvas.width*proWidth+proHeight,initY,proHeight/20,Math.PI*0.5,Math.PI*1.5,true);
ctx.closePath();
ctx.lineWidth = proHeight;
ctx.strokeStyle = bgColor;
ctx.stroke();
}
function drawProgress(){
scale += proSpeed;
if(scale>(proWidth+proSpeed)){
scale = 1-proWidth;
drawBgProgress();
}
currentX = canvas.width*scale;
ctx.save();
ctx.beginPath();
ctx.arc(initX,initY,proHeight/20,Math.PI*0.5,Math.PI*1.5,false);
ctx.moveTo(initX,initY);
ctx.lineTo(currentX,initY);
ctx.arc(canvas.width*scale+proHeight,initY,proHeight/20,Math.PI*0.5,Math.PI*1.5,true);
ctx.closePath();
ctx.lineWidth = proHeight;
ctx.strokeStyle = proColor;
ctx.shadowOffsetX = 0;//阴影X轴偏移
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 30;
ctx.shadowColor = 'rgba(255,255,255,0.8)';
ctx.stroke();
ctx.restore();
}
function drawPartitle(){
var range = 65;
for(var i=0;i<num;i++){
var r=0.5+Math.random()*4;
ctx.beginPath();
ctx.arc(currentX-i*20,initY+i*Math.random()*10,r,0,Math.PI*2,false);
ctx.arc(currentX-i*40,initY-i*Math.random()*30,r,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#CDA69F";
ctx.fill();
}
}
function update(){
ctx.clearRect(0,0,canvas.width,canvas.height);
drawBgProgress();
drawProgress();
drawPartitle();
}
setInterval(update,50);
});
</script>
</header>
<body>
<canvas class="canvas" id="canvas" style="background:#000;"></canvas>
</body>
</html>
