0

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>
0

1 Resposta 1

1

CSS não suporta nesting ao estilo &:before{, isso é sintaxe de linguagem que precisa ser compilada para CSS como less, sass ou stylus.

Usa então assim:

.circular-progress:before {

Exemplo:

.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;
}

.circular-progress: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;
}
<div class="circular-progress"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .