Spinning loader

v1.6 gemini nearly working

by dixalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
    <div id="spinner-container" style="display: none;"></div>

    <!--<h1>Content goes here...</h1>8-->

CSS

#spinner-container {
            position: relative;
            margin: 0 auto;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
            background-color: rgba(0, 0, 0, 0);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

JavaScript

var paper = Raphael(document.getElementById('spinner-container'), '100%', '100%');
var spinner;

function showSpinner() {
    spinner = paper.set();

    var centerX = 75;
    var centerY = 75;
    var radius = 60;

var pathString1 = Raphael.fullfill([
    ['M', centerX, centerY + radius],                      // Move to the starting point of the arc
    ['A', radius, radius, 0, 1, 1, centerX, centerY - radius], // Arc to the end point of the circle (clockwise)
    ['A', radius, radius, 0, 1, 1, centerX, centerY + radius]  // Second arc to close the circle
]);

   
    var pathString2 = Raphael.fullfill([
    ['M', centerX, centerY + radius],                      // Move to the starting point of the arc
    ['A', radius, radius, 0, 0, 0, centerX + radius, centerY] // Arc to the end point of the quarter circle (clockwise)
]);


    var circle1 = paper.path(pathString1).attr({
        stroke: '#16a34a',
        'stroke-width': 15,
        'stroke-opacity': 0.5,  // Opacity of the first circle
        fill: 'none'
    });

    var circle2 = paper.path(pathString2).attr({
        stroke: '#16a34a',
        'stroke-width': 15,
        'stroke-opacity': 0.9,  // Opacity of the second circle
        fill: 'none'
    });

    // Make the first circle static (non-animated)
    //var animation1 = Raphael.animation({}, 0).repeat(Infinity);
    var animation1 = Raphael.animation({
        transform: 'r360 ' + centerX + ' ' + centerY,
    }, 1000, 'linear');

    // Rotate the second circle along the same path as the first circle
    var animation2 = Raphael.animation({
        transform: 'r360 ' + centerX + ' ' + centerY,
    }, 1000, 'linear').repeat(Infinity);

    circle1.animate(animation1);
    circle2.animate(animation2);

    spinner.push(circle1, circle2);

    document.getElementById('spinner-container').style.display = 'flex';
}

function hideSpinner() {
    spinner.remove();
    document.getElementById('spinner-container').style.display = 'none';
}

// Simulate...