1
Hello people how to make progress bar in javascript equal to the image
1 answer
1
There are a number of Ibraries that do this. I recommend you use them not to reinvent the wheel.
- https://kimmobrunfeldt.github.io/progressbar.js/
- Using jQueryUI https://jqueryui.com/progressbar/
- A simpler option https://github.com/tinacious/goalProgress
Anyway, there are hundreds of these plugins/Ibraries for you to use.
If you really wanted to create yours using pure javascript or jquery will take a certain job without need, but I can help you.
You can create your own based on one that already exists.
For example https://www.npmjs.com/package/jquery-multi-bar
For a pure and library-free Javascript implementation, here is a very simple implementation https://jsfiddle.net/ss18yedy/9/ use it as a basis and evolve to a final solution that is what you need.
-
Ola Erick Gallani, I would really like to do one without using these libraries...
-
@Nice Radybatalha, so let’s go. Start here http://www.w3schools.com/howto/howto_js_progressbar.asp and increase as you develop to get to where you want to go.
-
here is the link: https://jsfiddle.net/hrtlopes/ss18yedy/
-
@Radybatalha here is a very simple implementation https://jsfiddle.net/ss18yedy/5/ you can continue from there
-
The same, @Erick Gallani..
-
@Radybatalha no problem. Don’t forget to mark the answer as correct to help other stackoverflow users.
-
@Radybatalha a better version https://jsfiddle.net/ss18yedy/9/
Browser other questions tagged javascript jquery jquery-ui
You are not signed in. Login or sign up in order to post.
You need the progress to be exactly the same as in the image (with all these assorted colors)?
– Wallace Maxters
You put the [jquery-ui] tag on your question. So I took the liberty of showing you this link. You’ve got it ready in jQueryUI
– Wallace Maxters
Red color does not need, can be two colors green and blue...
– Rady Batalha
This bar you want to use only html, css and javascript without plugins ? if yes, where you want to use it and how?
– Cleverson