<div class="graph-box">
<div class="chart"></div>
<p class="chart-data">
<span class="count">67</span>
</p>
</div>
.graph-box {
margin-top: 50px;
position: relative;
display: flex;
justify-content: center;
.chart {
&::before, &::after {
content: "";
border-radius: 50%;
box-sizing: border-box;
display: block;
width: 200px;
height: 200px;
}
&::before {
border: 15px solid #eff7fb;
}
&::after {
position: absolute;
top: 0;
background-image: conic-gradient(#1689c8 0, #1689c8 67%, transparent 33%);
mask-image: radial-gradient(transparent 0%, transparent 85px, #fff 85px, #fff);
mask-image: radial-gradient(transparent 0%, transparent 85px, #fff 85px, #fff);
}
}
.chart-data {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
font-weight: 700;
line-height: 1.2;
color: #1689c8;
margin: 0;
}
.count {
display: block;
font-size: 45px;
&:after {
font-size: 36px;
content: "%";
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.