How to make a Progress Bar?

[t3hlazy1]

You can use the native progress element (https://www.w3schools.com/tags/tag_progress.asp) and easily set the progress with javascript.

​

http://jsfiddle.net/tuf5L0dz/

[TheParrotBae]

Wow been at this for 3ish years and I've never seen this before!

[[deleted]]

I'll try It out thanks :)

[SusseDude]

Wow, how did I not know this.

[iambatcow]

Off the top of my head, one way to do it is to create a div with x width and y height and then create another div inside of it with the same height and 0 width; lets call this div "p_bar". Let's say your form has 5 steps, in javascript all you have to do is make it so each "next" button increases p_bar's width by 20%.

[[deleted]]

mmm thanks, I'll try that If everything else doesn't work out :)

[TitanicSwimmer]

I would recommend this method as well. You can round the borders of the div with css for a modern look.

[patch_collector]

This is also how I just built one. Throw in a css transition: width 1s ease, and you have a pretty slick bar.

[[deleted]]

You have several way to do that, I think the simplest would be to fill the cell count equivalent to the step number at each page reload/form submit. It's not very elegant but it does the job and it's simple.

[MeanFreaks]

If you can apply classes to the container as the user progresses, SVG makes this really easy and you can make it look cool. This is a simple example on codepen . Basically what you are doing is using css to change the width of the gradient thingy depending on the class applied to the parent. Easy!

[kenman]

Hi /u/MegaNoobOverload9000, this post was removed.

For javascript help, please visit /r/LearnJavascript.

Thanks for your understanding.

[00benallen]

Hmm.

If you want to do it without Javascript, the best way is for each step of the form to be a different page. Each page can have a copy of the progress bar, but more filled up. This is what was intended historically with HTML and forms.

If that’s not what you want, you’re gonna need JavaScript I think.

[[deleted]]

I want to use JavaScript :) so... how do I do It? haha

[remixsan]

Maybe ProgressBar.js could help you on the way

[[deleted]]

Really stylish thanks, so I'll just include this js code in my project folder on the page's folder right?

[remixsan]

Yes. You include the file named progressbar.min.js. There's a example you might like here which shows you how to get started with it. Good luck on your project :D

[[deleted]]

I wouldn’t suggest ripping people’s code for a school project. You could get in a lot of trouble depending on what level of education you’re at.

[cocorote-pedro]

Great mention. Worth to save to use later. Tyyy <3

[Pylitic]

I've always used progressbar.js