HTML进度条加载代码 JavaScript
.fn.extend({ Progress: function(options){ var settings = { width: 90, // 进度条宽度 height: 20, // 进度条高度 percent: 0, // 当前占比 backgroundColor: '#555', // 进度条背景颜色 barColor: '#d9534f', // 进度条颜色 fontColor: '#fff', // 百分比字体颜色 radius: 4, // 边角圆度 fontSize: 12, // 字体大小 increaseTime: 1000.00/60.00, // 每一次调整进度条的时间, 默认最佳时间(可以调大,不要调小);只有在animate为true的情况下有效 increaseSpeed: 1, // 每次调整,增长速度;只有在animate为true的情况下有效 animate: true // 调整的时候,是否使用动画增长,默认为true }; .extend(settings, options);
var svg = (this), background, bar, g, text, timeout;
function progressPercent(p){
if(!.isNumeric(p) || p < 0) { return 0; } else if(p > 100) { return 100; } else { return p; } } // 动画相关方法 var Animate = { getWidth: function(){ // 获取当前的宽度,根据总宽度和percent return settings.width * settings.percent / 100.00; }, getPercent: function(currentWidth){ // 根据当前的宽度,计算当前的percent return parseInt((100 * currentWidth / settings.width).toFixed(2)); }, animateWidth: function(currentWidth, targetWidth){ // 动画增长 timeout = setTimeout(function(){ if(currentWidth > targetWidth) { if(currentWidth - settings.increaseSpeed < = targetWidth) { currentWidth = targetWidth; } else { currentWidth = currentWidth - settings.increaseSpeed; } } else if(currentWidth < targetWidth) { if(currentWidth + settings.increaseSpeed >= targetWidth) { currentWidth = targetWidth; } else { currentWidth = currentWidth + settings.increaseSpeed; } } bar.attr("width", currentWidth);
text.empty().append(Animate.getPercent(currentWidth) + "%"); if(currentWidth != targetWidth) { Animate.animateWidth(currentWidth, targetWidth); } }, settings.increaseTime); } } function svg(tag){ return document.createElementNS("http://www.w3.org/2000/svg", tag); } // 初始化条件 !!function(){ settings.percent = progressPercent(settings.percent); svg.attr({'width': settings.width, 'height': settings.height});
background = (svg("rect")).appendTo(svg) .attr({x: 0, rx: settings.radius, width: settings.width, height: settings.height, fill: settings.backgroundColor}); bar = (svg("rect")).appendTo(svg)
.attr({x: 0, rx: settings.radius, height: settings.height, fill: settings.barColor});
g = (svg("g")).appendTo(svg) .attr({"fill": "#fff", "text-anchor": "middle", "font-family": "DejaVu Sans,Verdana,Geneva,sans-serif", "font-size": settings.fontSize}); text = (svg("text")).appendTo(g)
.attr({"x": settings.width/2.0, "y": settings.height/2.0 + settings.fontSize/3.0, fill: settings.fontColor});
draw();
}();
// 绘制进度条
function draw() {
var targetWidth = Animate.getWidth();
// 是否使用动画增长
if(settings.animate) {
if(timeout) {
clearTimeout(timeout);
}
var currentWidth = parseFloat(bar.attr("width")); if(!currentWidth) currentWidth = 0; Animate.animateWidth(currentWidth, targetWidth); } else { bar.attr("width", targetWidth);
$text.empty().append(settings.percent + "%");
}
}
this.percent = function (p) {
if(p) {
p = progressPercent(p);
settings.percent = p;
draw();
}
return settings.percent;
}
return this;
}
});