CSS-only Animated Loading Spinner

Apr 28, 2015 • Chris Pietschmann  • CSS

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.

Yes, the below spinner in this page is all CSS:



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

<html>
<head>
    <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
    <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>
    <script>
        $(function () {
            $('button').click(function () {
                $('.spinner').toggleClass('stop');
            });
        });
    </script>
</head>
<body>
    <div class="spinner">
        <div class="circle"></div>
    </div>
    <hr/>
    <button>Toggle Animation</button>
</body>
</html>

I hope this helps! :)