Dabblet: Loading spinner with animated SVG

dabblet.css

/**
 * Dabblet: Loading spinner with animated SVG
 */

body {
  	background: lightgrey;
}

/* Modern browsers */

.loading {	
	width: 50px;
	height: 50px;			
	background: url('http://www.vzhurudolu.cz/css3/src/spinner_animated.svg') center center no-repeat;
}

.loading .alternate {
	display: none;
}

/* Fallback for browsers without SVG support (IE8- for example, detected by Modernizr) */		

.no-svg .loading {			
	background-image: none;		
}

.no-svg .loading .alternate {
	display: inline;		
}

	
  

dabblet.html

<p class="loading">
	<span class="alternate"> 
	  Loading…		
	</span>
</p>

<!-- Using Modernizr for CSS animations detect (see CSS) -->

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

settings.json

{"view":"split","prefixfree":"1","page":"css"}