Google-style progress indicator (process)

dabblet.css

/**
 * Google-style progress indicator (process)
 */

.progress {
	display: inline-block;
	font-size: 50px; /* Size of the progress indicator */
	width: 1em;
	height: 1em;
	border: 0 solid grey;
	border-radius: 50%;
	box-sizing: border-box;
	background: silver;
	background-origin: border-box;
}

.progress:nth-of-type(2) { border-left-width: .1em; }
.progress:nth-of-type(3) { border-left-width: .2em; }
.progress:nth-of-type(4) { border-left-width: .3em; }
.progress:nth-of-type(5) { border-left-width: .4em; }
.progress:nth-of-type(6) { border-left-width: .5em }
.progress:nth-of-type(7) { border-left-width: .6em }
.progress:nth-of-type(8) { border-left-width: .7em }
.progress:nth-of-type(9) { border-left-width: .8em }
.progress:nth-of-type(10) { border-left-width: .9em }

.progress:nth-of-type(11) {
	background: linear-gradient(grey 40%, silver 30%);
	transform: rotate(90deg);
}

h1 {
	font: bold 100% sans-serif;
}

dabblet.html

<h1>Increasing border-left width</h1>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>

<h1>Split background colours</h1>
<div class="progress"></div>

dabblet.js

// alert('Hello world!');

settings.json

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