.circle {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	position: relative;
	background-color: transparent;
	border: 10px solid rgba(255, 255, 255, 0.1);
}

.mask, .fill {
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 50%;
	clip: rect(0, 200px, 200px, 100px);
}

.mask.full {
	clip: rect(auto, auto, auto, auto);
	background-color: transparent;
	border: 10px solid rgba(255, 255, 255, 0.3);
}

.fill {
	background-color: rgba(255, 255, 255, 0.3);
}

.inside-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 20px;
	color: white;
}