https://www.hollandsail.nl/themes/nieuw/js/spinner.js

1function Spinner(container, options) {
2
3    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
4        circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
5
6    options = options||{};
7    if (!("size" in options)) options.size = 48;
8    if (!("strokeWidth" in options)) options.strokeWidth = 4;
9
10    svg.className = 'spinner';
11    svg.setAttribute('width', options.size);
12    svg.setAttribute('height', options.size);
13    circle.setAttribute('cx', options.size / 2);
14    circle.setAttribute('cy', options.size / 2);
15    circle.setAttribute('r', (options.size / 2) - options.strokeWidth);
16    circle.setAttribute('fill', 'none');
17    if (options.color) {
18        circle.setAttribute('stroke', options.color);
19    }
20    circle.setAttribute('stroke-width', options.strokeWidth);
21    svg.appendChild(circle);
22
23    container.appendChild(svg);
24
25    var t0,
26        duration,
27        circumference,
28        t1 = 0, start = 0,
29        interval;
30
31    const N = 0.68333;
32
33    function curve(t) {
34        var r = 3*(1-t)*(1-t)*t*0.1215 + 3*(1-t)*t*t*0.6033 + t*t*t;
35        return r;
36    }
37
38    function getEnd(t, dt) {
39        var base = 4.26667 * t + 0.73611;
40        var s = dt / (duration/4) - Math.floor(dt/(duration/4));
41
42        if (s < 0.5) {
43            base += (Math.floor(dt / (duration / 4)) + curve(s*2)) * N;
44        } else {
45            base += (Math.floor(dt / (duration / 4)) + 1) * N;
46        }
47
48        return base;
49    }
50
51    function getStart(t, dt) {
52        var base = 4.26667 * t + 0.68056;
53        var s = dt / (duration/4) - Math.floor(dt/(duration/4));
54
55        if (s >= 0.5) {
56            base += (Math.floor(dt / (duration / 4)) + curve((s-0.5)*2)) * N;
57        } else {
58            base += Math.floor(dt / (duration / 4)) * N;
59        }
60
61        return base;
62    }
63
64    function tick() {
65        var dt = (Date.now() - t0) % duration;
66        var t = dt / duration;
67        var start = circumference * getStart(t, dt);
68        var end = circumference * getEnd(t, dt);
69        var fill = end - start;
70        var tail = circumference - fill;
71
72        circle.setAttribute('stroke-dasharray', fill + ' ' + tail);
73        circle.setAttribute('stroke-dashoffset', -start);
74    }
75
76    function spinCircle() {
77        duration = 4800;
78        circumference = parseFloat(circle.getAttribute('r')) * 2 * Math.PI;
79        t0 = Date.now();
80        interval = setInterval(tick, 10);
81    }
82
83    spinCircle();
84
85    this.stop = function() {
86        if (interval) {
87            clearInterval(interval);
88            interval = null;
89        }
90        container.removeChild(svg);
91    }
92}