JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

HTML

<div class="circle_box">
		<div>
			<svg>
				<circle cx="100" cy="100" r="95" />
				<circle cx="100" cy="100" r="95" />
			</svg>
			<span>90%</span>
		</div>
		<strong>c++ developer</strong>
	</div>
	<div class="circle_box">
		<div>
			<svg>
				<circle cx="100" cy="100" r="95" />
				<circle cx="100" cy="100" r="95" />
			</svg>
			<span>75%</span>
		</div>
		<strong>python developer</strong>
	</div>
	<div class="circle_box">
		<div>
			<svg>
				<circle cx="100" cy="100" r="95" />
				<circle cx="100" cy="100" r="95" />
			</svg>
			<span>40%</span>
		</div>
		<strong>php developer</strong>
	</div>

CSS

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #122325;
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 100vh;
}

svg{
	width: 200px;
	height: 200px;	
	transform: rotate(-90deg);
	overflow: initial;
}

circle{
	stroke-width:20px;
	fill:none;	
}
circle:nth-child(1){ stroke: #fff }
circle:nth-child(2){
	stroke: #f00;
	position: relative;
	z-index: 1;	
}
.circle_box:nth-child(1) circle:nth-child(2){
	stroke-dashoffset:calc(100 * 6);
	stroke-dasharray:calc(100 * 6);
	stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 90) / 100);
	stroke-position: inside;
}
.circle_box:nth-child(2) circle:nth-child(2){
	stroke-dashoffset:calc(100 * 6);
	stroke-dasharray:calc(100 * 6);
	stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 75) / 100);
	stroke: rgb(37, 224, 109);
}
.circle_box:nth-child(3) circle:nth-child(2){
	stroke-dashoffset:calc(100 * 6);
	stroke-dasharray:calc(100 * 6);
	stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 40) / 100);
	stroke: rgb(227, 241, 25);
}
.circle_box{
	font-size: 36px;
	color: #fff;
	text-align: center;
}
.circle_box div{
	position: relative;
}
.circle_box span{
	position: absolute;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);
	color: #fff;
	font-size: 40px;
}