https://agkhp.co.nz/templates/rt_acacia/js/progress_init.js

1((function(loader){
2    if (!RTLoaderCanvas) throw new Error('Unable to find RTLoaderCanvas library.');
3
4    var Progress = {
5        init: function(){
6            var elements = document.getElements('[data-canvas-graph]'),
7                data, canvas, middle, size, icon;
8
9            elements.forEach(function(element){
10                data = element.get('data-canvas-graph');
11                try {
12                    data = JSON.decode(data);
13                }
14                catch(e){
15                    data = null;
16                    element.html('<small>Error: Unable to parse options: <br /><code>' + data + '</code></small>');
17                }
18
19                if (data){
20                    if (!data.color) data.color = element.getStyle('color');
21
22                    element.setStyles({
23                        width: (data.radius * 2),
24                        height: (data.radius * 2)
25                    });
26
27                    canvas = new loader(element, {fgColor: data.color, strokeWidth: data.size, start: 0});
28                    element.store('canvas', {canvas: canvas, data: data});
29                    canvas = canvas.element;
30
31                    middle = new Element('div.canvas-middle').inject(canvas);
32                    size   = ((data.radius * 2) - (data.size * 2));
33                    middle.setStyles({
34                        width: size, height: size, borderRadius: size + 'px',
35                        marginLeft: -(size / 2), marginTop: -(size / 2)
36                    });
37
38                    if (data.icon){
39                        icon = new Element('i.' + data.icon).inject(middle);
40                        icon.setStyles({
41                            color: (data.iconColor ? data.iconColor : data.color),
42                            fontSize: data.iconSize,
43                            lineHeight: size
44                        });
45                    }
46
47                    if (data.text){
48                        text = new Element('span.canvas-pc').inject(middle);
49                        text.setStyles({
50                            color: (data.iconColor ? data.iconColor : data.color)
51                        });
52                    }
53                }
54            });
55        },
56
57        animate: function(){
58            var elements = document.getElements('[data-canvas-graph]'),
59                previous = [], pc;
60
61            elements.forEach(function(element, i){
62                if (!previous[i]) previous[i] = 0;
63                var memory = element.retrieve('canvas'),
64                    fx = moofx(function(time){
65                        time = time.toInt();
66                        if ((!time || !previous[i]) || (time / previous[i]) < 1.2){
67                            pc = element.getElement('.canvas-pc');
68                            memory.canvas.update(time);
69                            if (pc) pc.set('text', time.toInt() + '%');
70                        }
71
72                        previous[i] = time;
73                    });
74
75                fx.start.delay(Number.random(0, 400), fx, [0, memory.data.start, {
76                    duration: '400ms',
77                    equation: 'ease-out'
78                }]);
79            });
80        }
81    };
82
83    window.addEvent('domready', Progress.init);
84    window.addEvent('load', Progress.animate);
85
86})(RTLoaderCanvas));