6

Estou desenvolvendo uma tela utilizando o progresso do aluno, por exemplo, ele tem 10 atividades para serem completadas, e está na atividade 2, então isso representa 20% do total da atividade.

Gostaria de representar isso através de um gráfico de rosca, um botão para próximo exercício, algo assim:

inserir a descrição da imagem aqui

Conforme clico em próximo, a barra de progresso se move para a direita a fim de completar a rotação do circulo, e o número de dentro sobe de 1/7 para 2/7.

Seria muito interessante a resposta em somente CSS e JavaScript, ou algo assim.

Obrigado

5 Respostas 5

8

Fiz esse modelo usando um circulo em SVG com contorne e dasharray para controlar o tamanho do contorno, e css variable que vou mudar com JS para fazer o contorno no SVG crescer completando o gráfico a cada clique.

Sobre o círculo feito com SVG nessa forma de gráfico vc pode ler mais aqui: Desenhar circulo no Html5

Sobre CSS variables vc pode ler mais aqui: O que significa o -- especificado no :root do css do bootstrap?

inserir a descrição da imagem aqui

O valor total da circunferência do dasharray é 255, logo, divido 255 por 7 e tenho 36.42 que é o valor de cada step. No JS eu vou fazendo esse incremento até o counter chegar em 7, ao mesmo tempo que eu pego a variável --size declarada no :root e vou diminuindo as frações de 7.

Segue o código da imagem acima:

var btn1 = document.getElementById("button1");
var counters = document.querySelectorAll(".counter");
let root = document.documentElement;
var size = 36.42;

btn1.addEventListener("click", btn1Count);

function btn1Count(event) {
    let atual = parseInt(counters[0].innerHTML);
    
    if (atual == 7) return;

    counters[0].innerHTML = atual + 1;
    root.style.setProperty('--size', 255 + 36.42 - (size += 36.42));
}
.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;
}

:root {
    --size: 255;
}

.graph svg.cor {
    stroke: green;
    stroke-dasharray: 255;
    stroke-dashoffset: calc(var(--size) - 36.42);
    transform: rotate(-90deg);
    transform-origin: center;
}
<div class="graph">
    <svg>
        <circle cx="50" cy="50" r="40" />
    </svg>
    <svg class="cor">
        <circle cx="50" cy="50" r="40" />
    </svg>
    <span class="counter">1</span><span>/7</span>
</div>
<button id="button1">próxima</button>

2
  • 1
    Hugo, gostei muito da forma que você exemplificou, as vezes o total de atividades pode mudar, mas é facil alterar isso, parabéns !
    – David
    2/07/2019 às 14:34
  • 2
    @David valeu meu caro! a vantagem é que não tem praticamente nada de código comparado com plugins e outras bibliotecas, assim é mais fácil de vc manter o controle do que tem no seu projeto etc... E sim, é bem fácil de editar customizar etc, assim como no JS no CSS vc pode criar quantas --var quiser e usar onde o número de tarefas for diferente. []´s
    – hugocsl
    2/07/2019 às 14:38
4
+50

Uma sugestão é criar barras de progresso com JavaScript e mostrar as barras de acordo com o progresso, proporcional ao máximo de passos, sem uso de bibliotecas ou jQuery, com JavaScript puro.

O código puxa o valor da div para determinar o número de passos. Por exemplo, se a div possui o texto 1/7, o código puxa o 7:

HTML:

<div>1/7</div>

JS:

var maximo = +prog.textContent.trim().split("/")[1]; // 7

Ou seja, não precisa mudar nada no CSS ou no código, porque o valor dos passos é capturado de forma automática de acordo com o texto na div.

A medida que o botão Próximo é clicado, vai incrementando os passos e mostrando proporcionalmente as barras de progresso.

Vou deixar 3 exemplos com valores diferentes:

Exemplo com 7 passos:

document.addEventListener("DOMContentLoaded", function(){
   
   const p_ = document.getElementById("progresso");
   var b_ = '';
   for(let x=0; x < 360; x++){
      b_ += '<span style="transform: rotate('+x+'deg);"></span>';
   }
   p_.innerHTML += b_;
   
   var prog = document.querySelector("#progresso div");
   var maximo = +prog.textContent.trim().split("/")[1];
   var atual = 1;
   var bar_step = Math.floor(360/maximo);
   var bars = document.querySelectorAll("#progresso span");

   function passos(atual){
      var limit = atual == maximo ? bars.length : atual*bar_step;
      
      prog.innerHTML = atual + "/" + maximo;
      for(let b = 0; b < limit; b++){
         bars[b].style.display = "inline-block";
      }
   }
   passos(atual);
   
   document.getElementById("next").onclick = function(){
      if(atual < maximo){
         atual++;
         passos(atual);
      }
   }
   
});
#progresso, #progresso div{
   width: 100px;
   height: 100px;
   border: 2px solid #000;
   border-radius: 50%;
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

#progresso div{
   position: absolute;
   width: 60%;
   height: 60%;
   z-index: 1;
}

#progresso span{
   display: inline-block;
   width: 2px;
   height: 50%;
   background: red;
   position: absolute;
   left: 50%;
   margin-left: -1px;
   top: 0;
   transform-origin: bottom;
   display: none;
}
<div id="progresso">
   <div>1/7</div>
</div>
<br>
<button id="next">Próximo</button>

Exemplo com 3 passos:

document.addEventListener("DOMContentLoaded", function(){
   
   const p_ = document.getElementById("progresso");
   var b_ = '';
   for(let x=0; x < 360; x++){
      b_ += '<span style="transform: rotate('+x+'deg);"></span>';
   }
   p_.innerHTML += b_;
   
   var prog = document.querySelector("#progresso div");
   var maximo = +prog.textContent.trim().split("/")[1];
   var atual = 1;
   var bar_step = Math.floor(360/maximo);
   var bars = document.querySelectorAll("#progresso span");

   function passos(atual){
      var limit = atual == maximo ? bars.length : atual*bar_step;
      
      prog.innerHTML = atual + "/" + maximo;
      for(let b = 0; b < limit; b++){
         bars[b].style.display = "inline-block";
      }
   }
   passos(atual);
   
   document.getElementById("next").onclick = function(){
      if(atual < maximo){
         atual++;
         passos(atual);
      }
   }
   
});
#progresso, #progresso div{
   width: 100px;
   height: 100px;
   border: 2px solid #000;
   border-radius: 50%;
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

#progresso div{
   position: absolute;
   width: 60%;
   height: 60%;
   z-index: 1;
}

#progresso span{
   display: inline-block;
   width: 2px;
   height: 50%;
   background: red;
   position: absolute;
   left: 50%;
   margin-left: -1px;
   top: 0;
   transform-origin: bottom;
   display: none;
}
<div id="progresso">
   <div>1/3</div>
</div>
<br>
<button id="next">Próximo</button>

Exemplo com 5 passos:

document.addEventListener("DOMContentLoaded", function(){
   
   const p_ = document.getElementById("progresso");
   var b_ = '';
   for(let x=0; x < 360; x++){
      b_ += '<span style="transform: rotate('+x+'deg);"></span>';
   }
   p_.innerHTML += b_;
   
   var prog = document.querySelector("#progresso div");
   var maximo = +prog.textContent.trim().split("/")[1];
   var atual = 1;
   var bar_step = Math.floor(360/maximo);
   var bars = document.querySelectorAll("#progresso span");

   function passos(atual){
      var limit = atual == maximo ? bars.length : atual*bar_step;
      
      prog.innerHTML = atual + "/" + maximo;
      for(let b = 0; b < limit; b++){
         bars[b].style.display = "inline-block";
      }
   }
   passos(atual);
   
   document.getElementById("next").onclick = function(){
      if(atual < maximo){
         atual++;
         passos(atual);
      }
   }
   
});
#progresso, #progresso div{
   width: 100px;
   height: 100px;
   border: 2px solid #000;
   border-radius: 50%;
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

#progresso div{
   position: absolute;
   width: 60%;
   height: 60%;
   z-index: 1;
}

#progresso span{
   display: inline-block;
   width: 2px;
   height: 50%;
   background: red;
   position: absolute;
   left: 50%;
   margin-left: -1px;
   top: 0;
   transform-origin: bottom;
   display: none;
}
<div id="progresso">
   <div>1/5</div>
</div>
<br>
<button id="next">Próximo</button>

3
  • 2
    É isso mesmo produção, temos aqui javascript puro e CSS <3 ficou foda @Sam, parabéns !
    – David
    2/07/2019 às 17:08
  • 2
    Assim não da para competir 😂
    – hugocsl
    2/07/2019 às 17:41
  • 1
    @hugocsl rsrs.. é nóis!
    – Sam
    2/07/2019 às 17:43
2

Quando precisei usar um contador assim eu usei o Circliful. É um plugin jQuery muito fácil de usar e customizar, tem uns 20 atributos pra alterar se quiser e ele funciona muito bem.

Única dificuldade que eu encontrei nele foi que toda vez que queria mudar a quantidade dentro do circulo (passar de 1 pra 2 por exemplo como vc disse), voce precisa esvaziar a div que contem o elemento circliful e gerar de novo com o novo numero. Meio gambiarra mas funciona.

$("#test-circle5").circliful({
    animationStep: 5,
    foregroundBorderWidth: 5,
    backgroundBorderWidth: 15,
    percent: 80,
    halfCircle: 1,
});

Um exemplo de uso.

1
  • O problema é que eu preciso inserir mais texto dentro, e ao invés de % ter os valores do passo, mas obrigado
    – David
    21/08/2017 às 18:13
2

Existem diversas bibliotecas em javascript que podem te ajudar nessa situação, vou deixar dois exemplos, um com uma biblioteca javascript e outro somente com css. Seguem:

Percircle

Com ele você consegue manipular de forma mais simples os valores, tornando os saltos dinâmicos e com implementações ajax para salvar o progresso dos alunos. Github para referencia futura

$(document).ready(function() {
  $("#fif").percircle({
    percent: 30,
    text: "30"
  });
  $('#pular').click(function(e) {
    e.preventDefault();
    mudar();
  });
});

function mudar() {
  $("#fif").percircle({
    text: "50",
    percent: 50,
    progressBarColor: "#1ec0b0"
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://thodorisbais.github.io/percircle/dist/js/percircle.js"></script>
<link rel="stylesheet" href="https://thodorisbais.github.io/percircle/dist/css/percircle.css">
<div id="fif" class="pink big center"></div>
<div class="col" style="text-align:center"><button id="pular">Pular para 50</button></div>

Exemplo em CSS, mais simples porém também extensível. Github para referência futura

.progress {
  width: 150px!important;
  height: 150px!important;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}

.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}

.progress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progress .progress-left {
  left: 0;
}

.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.progress .progress-right {
  right: 0;
}

.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-1 1.8s linear forwards;
}

.progress .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: #44484b;
  font-size: 24px;
  color: #fff;
  line-height: 135px;
  text-align: center;
  position: absolute;
  top: 5%;
  left: 5%;
}

.progress.blue .progress-bar {
  border-color: #049dff;
}

.progress.blue .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.8s;
}

.progress.yellow .progress-bar {
  border-color: #fdba04;
}

.progress.yellow .progress-left .progress-bar {
  animation: loading-3 1s linear forwards 1.8s;
}

.progress.pink .progress-bar {
  border-color: #ed687c;
}

.progress.pink .progress-left .progress-bar {
  animation: loading-4 0.4s linear forwards 1.8s;
}

.progress.green .progress-bar {
  border-color: #1abc9c;
}

.progress.green .progress-left .progress-bar {
  animation: loading-5 1.2s linear forwards 1.8s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
  }
}

@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg);
  }
}

@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(126deg);
    transform: rotate(126deg);
  }
}

@media only screen and (max-width: 990px) {
  .progress {
    margin-bottom: 20px;
  }
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-3 col-sm-6">
      <div class="progress blue">
        <span class="progress-left">
          <span class="progress-bar"></span>
        </span>
        <span class="progress-right">
          <span class="progress-bar"></span>
        </span>
        <div class="progress-value">90%</div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="progress yellow">
        <span class="progress-left">
          <span class="progress-bar"></span>
        </span>
        <span class="progress-right">
          <span class="progress-bar"></span>
        </span>
        <div class="progress-value">75%</div>
      </div>
    </div>
  </div>
</div>

1

Você pode tentar utilizar o HighCharts, é a biblioteca mais completa atualmente e vastamente personalizável. Eu lembro de ter customizado as coisas dentro de um chart uma vez, mas era em barras, acredito que seja possível com gráficos nesse formato também.

Outra biblioteca bacana e simples é ProgressCircle.js. Com ele acho que você conseguiria fazer essa customização.

var progresso = 0;
var texto = "";

function addProgress() {
  progresso += 0.25;
  if (progresso === 0.25) {
      texto = "1/4";
  } else if (progresso === 0.50) {
      texto = "2/4";
  } else if (progresso === 0.75){
      texto = "3/4";
  } else if (progresso === 1) {
      texto = "4/4";
}
};

var myCanvas = document.getElementById('my_canvas');

var circle = new ProgressCircle({
    canvas: myCanvas,
    minRadius: 30
});

circle.addEntry({
    fillColor: 'rgba(152, 155, 225, 1)',
    progressListener: function() {
        return progresso;
    },
    infoListener: function() {return texto;},
}); 

circle.start(33);
<script src="//qiao.github.io/ProgressCircle.js/ProgressCircle.min.js"></script>
<canvas id="my_canvas" width="400" height="160"></canvas>

<button onClick="addProgress()">
Add Progresso
</button>

5
  • Vc não acha que isso deveria ser um comentário!? 2/07/2019 às 13:48
  • Não, resposta é resposta. 2/07/2019 às 14:15
  • Apenas um link não é resposta de acordo com o site. Mas agora que vc editou virou resposta 2/07/2019 às 14:18
  • Era esperado ele gerar alguns traços no interior do círculo quando passa do 4/4?
    – Woss
    2/07/2019 às 17:16
  • Sim, era pra ter um limitador, mas ai fica por conta de quem for usar 2/07/2019 às 18:08

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 .