Estou tentando reproduzir o efeito de barra de progresso circular, conforme o este tutorial .
Não estou conseguindo criar os pseudo-elementos adequadamente. Meu CSS ficou assim:
.circular-progress{
width: 12rem;
height: 12rem;
border-radius: 50%;
margin: auto;
background: linear-gradient(0deg, rgb(102, 102, 102) 50%, rgba(102, 102, 102,.2) 50%);
position: relative;
&:before{
content: "";
width: 12rem;
height: 12rem;
position: absolute;
top: 0;
left: 0;
background: red content-box;
border-radius: 50%;
padding: .5em;
box-sizing: border-box;
}
}
O HTML ficou assim:
<div class="circular-progress"></div>