Untitled

dabblet.css

.level-meter {
	height:20px;
	margin:0;
	padding:0;
	font-size:0;
	color:transparent;
	list-style-type:none;
}

	.level-meter li {
		width:20px;
		height:20px;
		margin:0 5px 0 0;
		padding:0;
		float:left;
		border-radius:50%;
		box-shadow:inset 0 1px 2px 1px rgba(0,0,0,0.2);
	}

	.level-meter[data-level^='1'] li:first-child,
	.level-meter[data-level^='2'] li:nth-last-child(n+5),
	.level-meter[data-level^='3'] li:nth-last-child(n+4),
	.level-meter[data-level^='4'] li:nth-last-child(n+3),
	.level-meter[data-level^='5'] li:nth-last-child(n+2),
	.level-meter[data-level^='6'] li {
		background:#2665ac;
	}

	.level-meter[data-level='0.5'] li:first-child,
	.level-meter[data-level='1.5'] li:nth-last-child(5),
	.level-meter[data-level='2.5'] li:nth-last-child(4),
	.level-meter[data-level='3.5'] li:nth-last-child(3),
	.level-meter[data-level='4.5'] li:nth-last-child(2),
	.level-meter[data-level='5.5'] li:last-child {
		background:linear-gradient(left, #2665ac, #2665ac 50%, #fff 50%);
	}

dabblet.html

<ul class="level-meter" data-level="4.5">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>

settings.json

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