Dabblet: SVG sandbox

dabblet.css

/**
 * Dabblet: SVG sandbox
 */

body {
  	background: lightgrey;
}

/* Modern browsers */

.loading {	
 	border: 1px solid #666;
	width: 80px;
	height: 80px;			
	background: url('http://www.vzhurudolu.cz/css3/src/loading.svg') center center no-repeat;
	background-size: 50px auto;
	background-position: -20px -20px;
}

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