Posted By Daniel Cotton

Google Style Loading Spinner - Pure CSS

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

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

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

The actual css spinner is comprised of 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 leaves the actual markup of the spinner in html to be just:

<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:

See the Pen Google Style Loading Spinner - CSS by Daniel Cotton (@japandan) on CodePen.

Author: Daniel Cotton - Type: Web - Date: 9th Aug, 2014


Go Back