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