Ola pessoal como fazer barra de progresso em javascript igual a da imagem
-
Precisa que o progresso seja exatamente igual o que está na imagem (com todas essas cores sortidas)?– Wallace VizerraCommented 9/09/2016 às 12:21
-
1Você colocou a tag [jquery-ui] na sua pergunta. Então tomei a liberdade de te mostrar esse link. Já tem pronto no jQueryUI– Wallace VizerraCommented 9/09/2016 às 12:23
-
O cor vermelho nao precisa, pode ser duas cores verde e o azul...– Rady BatalhaCommented 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?– CoviiCommented 9/09/2016 às 16:12
Adicione um comentário
|
1 Resposta
Existem uma série de libraries que fazem isso. Recomendo você utiliza-las para não reinventar a roda.
- https://kimmobrunfeldt.github.io/progressbar.js/
- Usando jQueryUI https://jqueryui.com/progressbar/
- 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.
-
Ola Erick Gallani, gostaria mesmo de fazer um sem utilização dessas bibliotecas... Commented 9/09/2016 às 13:33
-
@RadyBatalha legal, então vamos lá. Comece por aqui w3schools.com/howto/howto_js_progressbar.asp e vamos incrementando a medida que você for desenvolvendo para chegar até onde você quer. Commented 9/09/2016 às 13:45
-
-
@RadyBatalha aqui esta uma implementação bem simples jsfiddle.net/ss18yedy/5 você pode continuar a partir dela Commented 9/09/2016 às 16:37
-