1

Ola pessoal como fazer barra de progresso em javascript igual a da imagem inserir a descrição da imagem aqui

4
  • Precisa que o progresso seja exatamente igual o que está na imagem (com todas essas cores sortidas)? Commented 9/09/2016 às 12:21
  • 1
    Você colocou a tag [jquery-ui] na sua pergunta. Então tomei a liberdade de te mostrar esse link. Já tem pronto no jQueryUI Commented 9/09/2016 às 12:23
  • O cor vermelho nao precisa, pode ser duas cores verde e o azul... Commented 9/09/2016 às 12:24
  • Esta barra você quer utilizar somente html, css e javascript sem plugins ? se sim, onde deseja utiliza-la e como?
    – Covii
    Commented 9/09/2016 às 16:12

1 Resposta 1

1

Existem uma série de libraries que fazem isso. Recomendo você utiliza-las para não reinventar a roda.

  1. https://kimmobrunfeldt.github.io/progressbar.js/
  2. Usando jQueryUI https://jqueryui.com/progressbar/
  3. Uma opção mais simples https://github.com/tinacious/goalProgress

Enfim, existem centenas desses plugins/libraries para vocês usar.

Caso você queria mesmo criar a sua usando javascript puro ou jquery vai dar um certo trabalho sem necessidade, mas posso te ajudar.

Você pode criar a sua própria baseada em uma que já existe.

Por exemplo https://www.npmjs.com/package/jquery-multi-bar

Para uma implementação JavaScript pura e sem usar nenhuma biblioteca, aqui esta uma implementação bem simples https://jsfiddle.net/ss18yedy/9/ use ela como base e evolua até uma solução final que seja o que você precisa.

7

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