圆形进度示意图

使用canvas实现圆形进度加载条，支持AMD加载。

 (function (globle, factory) {
            typeof module != "undefined" && typeof module.exports != "undefined" ?
                module.exports.HProgress = factory() :
                (typeof define === 'function' ? define(factory) : globle.HProgress = factory())
        }(this, function () {

            var isObject = function isObject(obj) {
                return Object.prototype.toString.call(obj) === '[object Object]';
            }

            var warn = function warn(msg) {
                console.warn(msg);
            }

            var error = function error(msg) {
                console.error(msg);
            }

            function extend(o1, o2) {
                for (var key in o2) {
                    if (o2.hasOwnProperty(key) && o2[key]) {
                        o1[key] = o2[key]
                    }
                }
                return o1;
            }

            function HProgress(options) {
                this.options = {
                    el: '', //挂载点
                    size: 120,  //画板大小，默认120*120
                    baseColor: '#eee',  //底色
                    highLightColor: 'red',  //高亮色，进度条的颜色
                    percentage: 0, //进度值，默认50%
                    showTxt: true,
                    txt: '',    //显示文字
                    color: '#000'   //字体颜色
                };
                if (options && isObject(options)) {
                    var percentage = options.percentage;
                    if (isNaN(Number(percentage))) {
                        error('percentage should be a number');
                        return; 
                    } else if (percentage>1) {
                        percentage = 1;
                        warn('percentage max 1');
                    } else if (percentage < 0) {
                        percentage = 0;
                        warn('percentage min 0');
                    }
                    options.percentage = percentage;
                    extend(this.options, options);
                }
                this.init(options);
            }

            HProgress.prototype.init = function init() {
                var options = this.options;
                var container = options.el ? document.getElementById(options.el) : document.body;
                var canvas = document.createElement('canvas');
                canvas.style.width = options.size + 'px';
                canvas.style.height = options.size + 'px';
                var ratio = window.devicePixelRatio || 1;
                options.size = options.size * ratio;
                canvas.width = options.size;
                canvas.height = options.size;
                container.append(canvas);

                var beginAng = 0.75,
                    percentage = options.percentage,
                    circleCenterPoint = {
                        x: options.size / 2,
                        y: options.size / 2
                    },
                    circleRadius = options.size / 2 - 20,
                    lineWidth = options.size / 20,
                    endAng = beginAng + percentage * 1.5;

                var ctx = canvas.getContext('2d');
                ctx.lineCap = "round";
                ctx.strokeStyle = options.baseColor;
                ctx.lineWidth = lineWidth;
                ctx.beginPath();
                ctx.arc(circleCenterPoint.x, circleCenterPoint.y, circleRadius, beginAng * Math.PI, 0.25 * Math.PI);
                ctx.stroke();

                //highLight
                if (percentage > 0) {
                    ctx.strokeStyle = options.highLightColor;
                    ctx.lineWidth = lineWidth;
                    ctx.beginPath();
                    ctx.arc(circleCenterPoint.x, circleCenterPoint.y, circleRadius, beginAng * Math.PI, endAng * Math.PI);
                    ctx.stroke();
                }

                if (options.showTxt) {
                    ctx.lineWidth = 1;
                    var fontSize = lineWidth * 3;
                    ctx.font = fontSize + "px Georgia";
                    var txt = options.txt ? options.txt : (percentage * 100).toFixed(0) + '%';
                    var txtLen = ctx.measureText(txt).width;
                    ctx.fillStyle = options.color;
                    ctx.fillText(txt, circleCenterPoint.x - txtLen / 2, circleCenterPoint.y);
                }
            }
            return HProgress;
        }));

调用方法

new HProgress({
        percentage: '0.72',
        highLightColor: 'green',
        color: '#333'
    });
    new HProgress({
        percentage: 0.43,
        highLightColor: '#fa2b5c',
        color: '#333',
        size: 150
    });

demo示意图