Daniel Cotton

August 2014

Age: 17

Google Style Loading Spinner - Pure CSS

When I was logging into my google account I came across the google login spinner. As loading animations go, I love this implementation, as it is just so different from the usual types of spinner that you come across on most websites and yet still worked well from a user perspective.

However, the asset used to display this was an animated GIF image, and whilst this meets the requirements of the spinner and is a very simple implementation, it does severely limit options for scalability and customisation.

This lead me to design and create a pure CSS alternative to the GIF image, it utilises css3 animations, rounded borders .etc to re-create this folding effect.

The actual css spinner is comprised of individual 4 sections (Quarter Circle Elements) as the circle background colours and inside each of these a 'Highlight' Element used for the 'folding' effect of the spinner animation. This totals 8 animatable elements. With the 4 Highlight elements animating in width and height and the 4 background circle elements only changing color.

This leaves the actual markup of the spinner in html to be:

<div class="spinner">
    <span class="bgtopl">
        <span class="highlighttopl">
        </span>
    </span>
    <span class="bgtopr">
        <span class="highlighttopr">
        </span>
    </span>
    <span class="bottomrow">
        <span class="bgbtml">
        	<span class="highlightbtml">
            </span>
        </span>
        <span class="bgbtmr">
            <span class="highlightbtmr">
            </span>
    	</span>
    </span>
</div>
                        

Using pure CSS and percentages means that in order to customise the size only the width and height of the parent div need to be changed. In addition, custom colours are very easily implemented!

The css animation is then comprised of a long list of stages for each of these (total 8) elements, and results in the loading spinner below: