7

Estou tentando fazer um círculo de progresso, mas não estou conseguindo. Eu quero exatamente dessa forma.

  1. Quero um círculo preto.
  2. Uma borda em cinza menor que esse círculo, tipo uns 5px a menos.
  3. Um círculo que é o progresso.

Achei algumas dicas na internet mas não estou conseguindo colocar em prática. Não consigo fazer o círculo entender a porcentagem correta.

Até agora, fiz isso abaixo:

.percent {
  position: absolute;
  background-color: #000;
  width: 80px;
  height: 80px;
  left: 0;
  right: 0;
  top: 50px;
  margin: auto;
  color: #fff;
  font-size: 24px;
  display: table;
  text-align: center;
  border-radius: 50%;
}

.slice {
  width: 64px;
  height: 64px;
  border: 4px solid #fff;
  border-radius: 50%;
  top: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
}

.bar {
  border: 4px solid #f00;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  clip: rect(0, 30px, 30px, 0);
  transform: rotate(0deg);
}
<div class="percent">
  <div class="slice">
    
  </div>
  <div class="bar"></div>
    <div class="fill"></div>
</div>

1
  • Tomei um negativo aqui sem motivos. Até quando? Commented 8/11/2017 às 17:38

1 Resposta 1

1

Diego vamos por partes.

Primeiro o estilo clip:rect(); foi descontinuado. Agora o que se usa é o Clip-Path

Além disso o Rect quer dizer retângulo, antão nunca daria certo trabalhar com ele em forma de círculo. Para isso existe o clip-path:circle();

Referência do clip:rect(); (deprecated): https://developer.mozilla.org/en-US/docs/Web/CSS/clip

Referência do clip-path:circle(); https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path


Agora vamos ao que interessa, o código!

Usei como base o design e código que você postou, e fiz a animação usando @keyframes está 100% CSS não tem script. A técnica que eu usei não usa o clip:rect(); mas o resultado pode te interessar...

É um modelo bem simples mesmo, mas é para fins didáticos e você ver funcionando com o seu próprio código. Se quiser depois te passo uns links com modelo mais sofisticados só com CSS também.

.percent {
    position: absolute;
    background-color: #000;
    width: 80px;
    height: 80px;
    left: 0;
    right: 0;
    top: 50px;
    margin: auto;
    border-radius: 50%;
    }
    .slice {
    width: 64px;
    height: 64px;
    border: 4px solid #fff;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    }
    .bar1 {
    border: 4px solid #f00;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    border-top: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    -webkit-animation: loader1 4s linear infinite;
            animation: loader1 4s linear infinite;
    }
    .bar2 {
    border: 4px solid #f00;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    border-top: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    -webkit-animation: loader2 4s linear infinite;
            animation: loader2 4s linear infinite;
    }

    @-webkit-keyframes loader1 {
        0% {
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        25% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        50% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        75% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid red;
            border-left: 4px solid transparent;
        }
        100% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid red;
            border-left: 4px solid red;
        }
    }

    @keyframes loader1 {
        0% {
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        25% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        50% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        75% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid red;
            border-left: 4px solid transparent;
        }
        100% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid red;
            border-left: 4px solid red;
        }
    }

    @-webkit-keyframes loader2 {
        0% {
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
        }
        25% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg);
        }
        50% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid red;
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
        }
        75% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid red;
            border-left: 4px solid red;
            -webkit-transform: rotate(270deg);
                    transform: rotate(270deg);
        }
        100% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid red;
            border-left: 4px solid red;
            -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
        }
    }

    @keyframes loader2 {
        0% {
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
        }
        25% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg);
        }
        50% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid red;
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
        }
        75% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid red;
            border-left: 4px solid red;
            -webkit-transform: rotate(270deg);
                    transform: rotate(270deg);
        }
        100% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid red;
            border-left: 4px solid red;
            -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
        }
    }
<div class="percent">
    <div class="slice"></div>
    <div class="bar1"></div>
    <div class="fill"></div>
</div>

<div class="percent" style="margin-left: 100px">
    <div class="slice"></div>
    <div class="bar2"></div>
    <div class="fill"></div>
</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 .