CSS: How do I create a spinning 'loading' icon using an image

The icon can be created using the following simple classes

.loading{background:url(../img/loading-purple.gif) no-repeat center}

.loading > div{display:none}

Here is a sample image that could be used.

Too easy. However, this is old school. You can create a simpler one using CSS and HTML5.

Here is the CSS:
.loading-container{display:block;width:100%;min-height:45%;margin-top:60px;text-align:center}
.loader {margin:0 auto;text-align:center;width:200px;min-height:100%;display:block;vertical-align:middle}
.loader:hover{opacity:1}
.loading-spinning-bubbles{position:relative;margin:auto;min-height:1px}
.loading-spinning-bubbles .bubble-container {position:absolute;top:calc(50% - 10px/2);left:calc(50% - 10px/2);transform-origin:-150% 50%;-webkit-transform-origin:-150% 50%;-moz-transform-origin:-150% 50%}
.loading-spinning-bubbles .bubble-container .bubble {background:#00ac00;width:10px;height:10px;border-radius:50%;animation:bubble 1s infinite;-webkit-animation:bubble 1s infinite;-moz-animation:bubble 1s infinite;animation-delay:inherit;-webkit-animation-delay:inherit;-moz-animation-delay:inherit}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+1) {transform:translateX(200%) rotate(-90deg);-moz-transform:translateX(200%) rotate(-90deg); -webkit-transform:translateX(200%) rotate(-90deg);animation-delay:-1.5s;-webkit-animation-delay:-1.5s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+2) {transform:translateX(200%) rotate(-45deg);-moz-transform:translateX(200%) rotate(-45deg); -webkit-transform:translateX(200%) rotate(-45deg) ;animation-delay:-1.375s;-webkit-animation-delay:-1.375s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+3) {transform:translateX(200%);-moz-transform:translateX(200%); -webkit-transform:translateX(200%);animation-delay:-1.25s;-webkit-animation-delay:-1.25s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+4) {transform:translateX(200%) rotate(45deg);-moz-transform:translateX(200%) rotate(45deg); -webkit-transform:translateX(200%) rotate(45deg);animation-delay:-1.125s;-webkit-animation-delay:-1.125s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+5) {transform:translateX(200%) rotate(90deg);-moz-transform:translateX(200%) rotate(90deg); -webkit-transform:translateX(200%) rotate(90deg);animation-delay: -1s;-webkit-animation-delay:-1s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+6) {transform:translateX(200%) rotate(135deg);-moz-transform:translateX(200%) rotate(135deg); -webkit-transform:translateX(200%) rotate(135deg);animation-delay:-0.875s;-webkit-animation-delay:-0.875s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+7){transform:translateX(200%) rotate(180deg);-moz-transform:translateX(200%) rotate(180deg); -webkit-transform:translateX(200%) rotate(180deg);animation-delay:-0.75s;-webkit-animation-delay:-0.75s}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+8){transform:translateX(200%) rotate(225deg);-moz-transform:translateX(200%) rotate(225deg); -webkit-transform:translateX(200%) rotate(225deg);animation-delay:-0.625s;-webkit-animation-delay:-0.625s}

And an HTML code snippet (using angular)

<div class="loading-container" ng-show="isProcessing">
    <div class="loader">
        <div class="loading-spinning-bubbles">
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
            <div class="bubble-container">
                <div class="bubble"></div>
            </div>
        </div>
    </div>
    <p class="loading-text">Loading...</p>
</div>

​