https://hausmusik.com/js/circle-progress.js

1/*
2 * jquery-circle-progress - jQuery Plugin to draw animated circular progress bars
3 *
4 * @author https://github.com/kottenator
5 * @version 0.6.0
6 */
7
8 $.circleProgress = {
9    // Default options (you may override them)
10    defaults: {
11        /**
12         * This is the only required option. It should be from 0.0 to 1.0
13         * @type {float}
14         */
15         value: 0,
16
17        /**
18         * Size of the circle / canvas in pixels
19         * @type {int}
20         */
21         size: 100,
22
23        /**
24         * Initial angle for 0.0 value in radians
25         * @type {float}
26         */
27         startAngle: -Math.PI,
28
29        /**
30         * Width of the arc. By default it's calculated as 1/14 of size, but you may set it explicitly in pixels
31         * type {int|'auto'}
32         */
33         thickness: 'auto',
34
35        /**
36         * Fill of the arc. You may set it to:
37         *   - solid color:
38         *     - { color: '#3aeabb' }
39         *     - { color: 'rgba(255, 255, 255, .3)' }
40         *   - linear gradient (left to right):
41         *     - { gradient: ['#3aeabb', '#fdd250'] }
42         *     - { gradient: ['red', 'green', 'blue'] }
43         *   - image:
44         *     - { image: 'http://i.imgur.com/pT0i89v.png' }
45         *     - { color: 'lime', image: 'http://i.imgur.com/pT0i89v.png' } - color displayed until the image is loaded
46         */
47         fill: {
48            gradient: ['#3aeabb', '#fdd250']
49        },
50
51        /**
52         * Color of the "empty" arc. Only a color fill supported by now
53         * @type {string}
54         */
55         emptyFill: 'rgba(0, 0, 0, .1)',
56
57        /**
58         * Animation config (see jQuery animations: http://api.jquery.com/animate/)
59         */
60         animation: {
61            duration: 1200,
62            easing: 'circleProgressEasing'
63        }
64    }
65};
66
67// Renamed ease-in-out-cubic
68$.easing.circleProgressEasing = function(x, t, b, c, d) {
69    if ((t /= d / 2) < 1)
70        return c / 2 * t * t * t + b;
71    return c / 2 * ((t -= 2) * t * t + 2) + b;
72};
73
74/**
75 * Draw animated circular progress bar.
76 *
77 * Appends <canvas> to the element or updates already appended one.
78 *
79 * If animated, throws 3 events:
80 *
81 *   - circle-animation-start(jqEvent)
82 *   - circle-animation-progress(jqEvent, animationProgress, stepValue) - multiple event;
83 *                                                                        animationProgress: from 0.0 to 1.0;
84 *                                                                        stepValue: from 0.0 to value
85 *   - circle-animation-end(jqEvent)
86 *
87 * @param options Example: { value: 0.75, size: 50, animation: false };
88 *                you may set any of default options (see above);
89 *                `animation` may be set to false;
90 *                you may also use .circleProgress('widget') to get the canvas
91 */
92 $.fn.circleProgress = function(options) {
93    if (options == 'widget')
94        return this.data('circle-progress');
95
96    options = $.extend({}

96, $.circleProgress.defaults, options);
97
98    return this.each(function() {
99        var el = $(this),
100        size = options.size,
101        radius = size / 2,
102        thickness = size / 14,
103        value = options.value,
104        startAngle = options.startAngle,
105        emptyArcFill = options.emptyFill,
106        arcFill;
107
108        if ($.isNumeric(options.thickness))
109            thickness = options.thickness;
110
111        // Prepare canvas
112        var canvas = el.data('circle-progress');
113
114        if (!canvas) {
115            canvas = $('<canvas>').prependTo(el)[0];
116            el.data('circle-progress', canvas);
117        }
118
119        canvas.width = size;
120        canvas.height = size;
121
122        var ctx = canvas.getContext('2d');
123
124        if (!options.fill)
125            throw Error("The fill is not specified!");
126
127        if (options.fill.color)
128            arcFill = options.fill.color;
129
130        if (options.fill.gradient) {
131            var gr = options.fill.gradient;
132            if (gr.length == 1) {
133                arcFill = gr[0];
134            } else if (gr.length > 1) {
135                var lg = ctx.createLinearGradient(0, 0, size, 0);
136                for (var i = 0; i < gr.length; i++)
137                    lg.addColorStop(i / (gr.length - 1), gr[i]);
138                arcFill = lg;
139            }
140        }
141
142        if (options.fill.image) {
143            var img = new Image();
144            img.src = options.fill.image;
145            img.onload = function() {
146                var bg = $('<canvas>')[0];
147                bg.width = size;
148                bg.height = size;
149                bg.getContext('2d').drawImage(img, 0, 0, size, size);
150                arcFill = ctx.createPattern(bg, 'no-repeat');
151
152                // we need to redraw static value
153                if (!options.animation)
154                    draw(value);
155            }
156        }
157
158        if (options.animation)
159            drawAnimated(value);
160        else
161            draw(value);
162
163        function draw(v) {
164            ctx.clearRect(0, 0, size, size);
165            drawArc(v);
166            drawEmptyArc(v);
167        }
168
169        function drawArc(v) {
170            ctx.save();
171            ctx.beginPath();
172            ctx.arc(radius, radius, radius - thickness / 2, startAngle, startAngle + Math.PI * 2 * v);
173            ctx.lineWidth = thickness;
174            ctx.strokeStyle = arcFill;
175            ctx.stroke();
176            ctx.restore();
177        }
178
179        function drawEmptyArc(v) {
180            ctx.save();
181            if (v < 1) {
182                ctx.beginPath();
183                if (v <= 0)
184                    ctx.arc(radius, radius, radius - thickness / 2, 0, Math.PI * 2);
185                else
186                    ctx.arc(radius, radius, radius - thickness / 2, startAngle + Math.PI * 2 * v, startAngle);
187                ctx.lineWidth = thickness;
188                ctx.strokeStyle = emptyArcFill;
189                ctx.stroke();
190            }
191            ctx.restore();
192        }
193
194        function drawAnimated(v) {
195            el.trigger('circle-animation-start');
196
197            $(canvas).css({ progress: 0 }).animate({ progress: v },
198                $.extend({}, options.animation, {
199                    step: function(p) {
200                        draw(p);
201                        el.trigger('circle-animation-progress', [p / v, p]);
202                    },
203
204                    complete: function() {
205                        el.trigger('circle-animation-end');
206                    }
207                })
208                );
209        }
210    });
211};