CSS-only Animated Loading Spinner

CSS Animations are a feature that's been around for a few years, but not many web developers know about it. CSS Animations allow you to define animations and transitions for HTML elements without the need to write JavaScript to do it, or even create an animated GIF file.

Here's a simple Loading Spinner using a simple CSS Animation:

<style>
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .spinner {
        animation: spin 1s infinite linear;
        width: 1em;
        height: 1em;
    }
    .spinner.stop {
        /* when this class is applied the animation will stop */
        animation: none;
    }
    .circle {
        border: solid 0.05em black;
        width: 1em;
        height: 1em;
        border-radius: 1em;
        border-left: none;
        border-bottom: none;
        border-right: none;
    }</style><div class="spinner"><div class="circle"></div></div>

Download Full Code:

CSS-Spinner.zip (547.00 bytes)