Animated activity indicator

dabblet.css

/**
 * Animated activity indicator
 */

html, body {
	width: 100%;
	height: 100%;
}
.activity-indicator {
	width: 10px;
	height: 10px;	
	border: 5px solid #CCC;
	border-radius: 50%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin:auto;
	position: absolute;
	transition: width 0.5s cubic-bezier(.35,-0.31,.8,1.6),
				height 0.5s cubic-bezier(.35,-0.31,.8,1.6),
				border-color 0.01s linear 0s;
}

.activity-indicator:hover {
	width: 50px;
	height: 50px;
	border: 5px solid #CCC;
	border-top: #7fa39f solid 5px;
	animation: spin 1s cubic-bezier(.35,-0.31,.8,1.6) infinite 1s;
	transition: width 0.5s cubic-bezier(.35,-0.31,.8,1.6),
				height 0.5s cubic-bezier(.35,-0.31,.8,1.6),
				border-color 0.5s linear 0.5s;
}

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

dabblet.html

<div class="activity-indicator"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}