Spinner

This showcases some ways to build some simple spinners.

Circular Spinner

Solution

<div class="spinner">
</div>

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    height: 64px; /* tunable: height */
    width: 64px; /* tunable: width */

    border: 5px solid lightgrey; /* tunable: outer border's width and color */
    border-top: 5px solid blue; /* tunable: inner border's width and color */
    border-radius: 1000px;

    animation-name: spin;
    animation-duration: 4s; /* tunable: spin speed */
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

Circular Filling Spinner

Solution

<div class="spinner">
</div>

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation-name: spin;
    animation-duration: 4s; /* tunable: spin speed */
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

window.addEventListener("load", () => {
    const ctx = document.getElementById("circular-filling-spinner-canvas").getContext("2d");
    ctx.lineWidth = 8; /* tunable: stroke width */
    ctx.strokeStyle = "#3498db"; /* tunable: stroke color */
    ctx.lineCap = "round";
    const height = 150; /* tunable: height */
    const width = 150; /* tunable: width */
    const rps = 0.5; /* tunable: round per second */
    
    function draw() {
        ctx.clearRect(0, 0, width, height);
        const s = Date.now() / 1000;
        const progress = 2 / 3 * Math.sin(s * Math.PI * 1.9 * rps) + 1 / 3;
        ctx.beginPath();
        ctx.arc(width / 2, height / 2, width / 2.5, -Math.PI / 2, 3 * Math.PI / 2 * progress, true);
        ctx.stroke();
        
        window.requestAnimationFrame(draw); 
    }
    
    window.requestAnimationFrame(draw);
});