HTML5 / CSS3 Circle with Partial Border

dabblet.css

/**
 * HTML5 / CSS3 Circle with Partial Border
 * http://stackoverflow.com/q/13059190/1397351
 */
* { margin: 0; padding: 0; }


.norkart_preloader{
	position:relative;
	left:20px;
	top:20px;
	font-size:50px;
}


.circle {
	font-size:0.2em;
	position: relative;
	margin: 0em;
	width: 5em; height: 5em;
	border-radius: 50%;

}

.arc11 {
	overflow: hidden;
	position: absolute;
	top: -1em; right: 50%; bottom: 50%; left: -1em;
	transform-origin: 100% 100%;
	transform: rotate(270deg) skewX(70deg);
}
.arc11:before {
	box-sizing: border-box;
	display: block;
	border: solid 1em black;
	width: 200%; height: 200%;
	border-radius: 50%;
	transform: skewX(-70deg);
	content: '';
}

.arc10 {
	overflow: hidden;
	position: absolute;
	top: -1em; right: 50%; bottom: 50%; left: -1em;
	transform-origin: 100% 100%;
	transform: rotate(270deg) skewX(70deg);
}
.arc10:before {
	box-sizing: border-box;
	display: block;
	border: solid 1em black;
	width: 200%; height: 200%;
	border-radius: 50%;
	transform: skewX(-70deg);
	content: '';
}


.arc9 {
	overflow: hidden;
	position: absolute;
	top: -1em; right: 50%; bottom: 50%; left: -1em;
	transform-origin: 100% 100%;
	transform: rotate(270deg) skewX(70deg);
}
.arc9:before {
	box-sizing: border-box;
	display: block;
	border: solid 1em black;
	width: 200%; height: 200%;
	border-radius: 50%;
	transform: skewX(-70deg);
	content: '';
}


.arc8 {
	overflow: hidden;
	position: absolute;
	top: -1em; right: 50%; bottom: 50%; left: -1em;
	transform-origin: 100% 100%;
	transform: rotate(240deg) skewX(70deg);
}
.arc8:before {
	box-sizing: border-box;
	display: block;
	border: solid 1em black;
	width: 200%; height: 200%;
	border-radius: 50%;
	transform: skewX(-70deg);
	content: '';
}

.arc7 {
	overflow: hidden;
	position: absolute;
	top: -1em; right: 50%; bottom: 50%; left: -1em;
	transform-origin: 100% 100%;
	transform: rotate(210deg) skewX(70deg);
}
.arc7:before {
	box-sizing: border-box;
	display: block;
	border: solid 1em black;
	width: 200%; height: 200%;
	border-radius: 50%;
	transform: skewX(-70deg);
	content: '';
}

.arc6 {
	overflow: hidden;
	position: absolute;
	top: -1em; right: 50%; bottom: 50%; left: -1em;
	transform-origin: 100% 100%;
	transform: rotate(180deg) skewX(70deg);
}
.arc6:before {
	box-sizing: border-box;
	display: block;
	border: solid 1em black;
	width: 200%; height: 200%;
	border-radius: 50%;
	transform: skewX(-70deg);
	content: '';
}



.arc5 {
	overflow: hidden;
	position: absolute;
	top: -1em; right: 50%; bottom: 50%; left: -1em;
	transform-origin: 100% 100%;
	transform: rotate(150deg) skewX(70deg);
}
.arc5:before {
	box-sizing: border-box;
	display: block;
	border: solid 1em black;
	width: 200%; height: 200%;
	border-radius: 50%;
	transform: skewX(-70deg);
	content: '';
}

.arc4 {
	overflow: hidden;
	position: absolute;
	top: -1em; right: 50%; bottom: 50%; left: -1em;
	transform-origin: 100% 100%;
	transform: rotate(120deg) skewX(70deg);
}
.arc4:before {
	box-sizing: border-box;
	display: block;
	border: solid 1em black;
	width: 200%; height: 200%;
	border-radius: 50%;
	transform: skewX(-70deg);
	content: '';
}


.arc3 {
	overflow: hidden;
	position: absolute;
	top: -1em; right: 50%; bottom: 50%; left: -1em;
	transform-origin: 100% 100%;
	transform: rotate(90deg) skewX(70deg);
}
.arc3:before {
	box-sizing: border-box;
	display: block;
	border: solid 1em black;
	width: 200%; height: 200%;
	border-radius: 50%;
	transform: skewX(-70deg);
	content: '';
}

.arc2 {
	overflow: hidden;
	position: absolute;
	top: -1em; right: 50%; bottom: 50%; left: -1em;
	transform-origin: 100% 100%;
	transform: rotate(60deg) skewX(70deg);
}
.arc2:before {
	box-sizing: border-box;
	display: block;
	border: solid 1em black;
	width: 200%; height: 200%;
	border-radius: 50%;
	transform: skewX(-70deg);
	content: '';
}

.arc1 {
	overflow: hidden;
	position: absolute;
	top: -1em; right: 50%; bottom: 50%; left: -1em;
	transform-origin: 100% 100%;
	transform: rotate(30deg) skewX(70deg);
}
.arc1:before {
	box-sizing: border-box;
	display: block;
	border: solid 1em black;
	width: 200%; height: 200%;
	border-radius: 50%;
	transform: skewX(-70deg);
	content: '';
}

.arc0 {
	overflow: hidden;
	position: absolute;
	top: -1em; right: 50%; bottom: 50%; left: -1em;
	transform-origin: 100% 100%;
	transform: rotate(0deg) skewX(70deg);
}
.arc0:before {
	box-sizing: border-box;
	display: block;
	border: solid 1em green;
	width: 200%; height: 200%;
	border-radius: 50%;
	transform: skewX(-70deg);
	content: '';
}

dabblet.html

<!-- content to be placed inside <body>…</body> -->
<div class="norkart_preloader">
	<div class='circle'>
		<div class='arc0'></div>
		<div class='arc1'></div>
		<div class='arc2'></div>
		<div class='arc3'></div>
		<div class='arc4'></div>
		<div class='arc5'></div>
		<div class='arc6'></div>
		<div class='arc7'></div>
		<div class='arc8'></div>
		<div class='arc9'></div>
		<div class='arc10'></div>
		<div class='arc11'></div>
	</div>
</div>

settings.json

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