Untitled

dabblet.css

.circle-container { 
	width: 20%;
}

.circle {
    /* circle code start */
	border-radius: 50%;
	width: 100%;
	height: auto;
	padding-top: 100%;
	
	/* needed for content positioning */
	position: relative;
	
	/* here we want border but can use background if needed */
	border: 5px solid red;
}

.circle__content {
    /* v/h centered */
    position: absolute;    
    top: 50%;    
    left: 50%;    
    transform: translate(-50%, -50%);
    text-align: center;
}

dabblet.html

<!-- responsive circle -->
<div class="circle-container">
    <div class="circle">
    	<div class="circle__content">
    		<span>1 of 2</span><br/><span>used</span>
    	</div>
    </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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