Aqui tem uma opção simples com SVG
, tentei deixar da maneira mais didática possível, a ideia é usar uma "linha pontinhada" na borda de um circle svg
e como o stroke-dasharray
e o stroke-dashoffset
vc controla o preenchimento do gráfico. Não é nada muito complexo, e vc consegue controlar todas as propriedades com JS e CSS. Tudo é centralizado com flex
no container
e position:absolute
nos filhos.
Aproveite e inclui uma opção animando o stroke-dashoffset
para vc ver como é fácil animar o gráfico apenas usando CSS com @keyframes
Sego o código da imagem acima.
body {
display: flex;
}
.graph {
text-align: center;
width: 100px;
height: 100px;
line-height: 60px;
text-transform: uppercase;
font-family: sans-serif;
text-decoration: none;
font-size: 14px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
svg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
fill: transparent;
stroke-width: 12px;
stroke: #ddd;
}
.graph svg.cor {
stroke: green;
stroke-dasharray: 255;
stroke-dashoffset: 66;55;
transform: rotate(-90deg);
transform-origin: center;
}
.graph svg.cor-anim {
stroke: red;
stroke-dashoffset: 255;
animation: anim 5s infinite;
}
@keyframes anim {
45% {
stroke-dashoffset: 55;
}
55% {
stroke-dashoffset: 55;
}
}
<div class="graph">
<svg>
<circle cx="50" cy="50" r="40" />
</svg>
<svg class="cor">
<circle cx="50" cy="50" r="40" />
</svg>
Btn
</div>
<div class="graph">
<svg>
<circle cx="50" cy="50" r="40" />
</svg>
<svg class="cor cor-anim">
<circle cx="50" cy="50" r="40" />
</svg>
Btn
</div>
Nessa resposta tem mais detalhes em um modelo semelhante só que em um rect
no hover
do link
: Pintar parcialmente a borda em CSS
E nessa outra tem algo similar apenas com CSS, e como vc pode ver no futuro com conic-gradiente
vc vai conseguir fazer isso apenas com CSS: Como poderia fazer um pacman mexendo a boca com CSS puro?