SVG loading indicator

by balefrost

HTML

<svg width="100" height="100" class="spinner">
</svg>

CSS

svg {
    background-color: #000;
}

JavaScript

var $svg = $('svg.spinner');

var r = 14;
var duration = 1;

for (var angle = 0, i = 0; angle < 2 * Math.PI; angle += Math.PI / 4, ++i) {
    var cx = 50 + Math.cos(angle) * (50 - r);
    var cy = 50 + Math.sin(angle) * (50 - r);
    var $circle = $(document.createElementNS("http://www.w3.org/2000/svg", "circle"));
    $circle.attr("cx", cx).attr("cy", cy).attr("r", r).attr("fill", "orange");
    var animate = document.createElementNS("http://www.w3.org/2000/svg", "animate");
    var values = [];
    console.log('resetting');
    for (var j = 0; j < 8; ++j) {
        var distanceFromCurrent = ((j - i) % 8 + 8) % 8;
        console.log(distanceFromCurrent);
        values[j] = Math.pow(0.7, distanceFromCurrent);
    }
    values[8] = values[0];
    
    animate.setAttribute("attributeName", "opacity");
    animate.setAttribute("begin", "0s");
    animate.setAttribute("dur", "1s");
    animate.setAttribute("values", values.join(";"));
    animate.setAttribute("repeatCount", "indefinite");
    
    $circle.append(animate);
    $svg.append($circle);
}