Reset html5 progress bar

StarDusterII
StarDusterII used Ask the Experts™
on
How do I reset an HTML5 progress bar back with Javacript to its original look after it's been used?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2014
Top Expert 2014

Commented:
How are you setting it?  Should be just a simple case of setting the value with javascript.

Author

Commented:
Not really setting it with anything.  The only thing I have in css is progress { width: 100%; }

So, what value to set?
Expert of the Year 2014
Top Expert 2014

Commented:
Then it should just  be a case of - are you using jquery?

$("#progress-bar-id").val("0")
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Not using jquery.  Here's what I'm using.  Basically, the progress bar is colored as the file is uploaded and when it's finished, I can't get the color back to it's original color.

<progress id="uploadprogress" min="0" max="100" value="0"></progress>
progress = document.getElementById('uploadprogress')
...
var complete = (event.loaded / event.total * 100 | 0);
progress.value = progress.innerHTML = complete;
...
progress.value = progress.innerHTML = 0;

Open in new window

Apparently, you can't reset the progress bar too soon.  I set a timer for a couple of seconds after the file had uploaded and then:

progress.value = progress.innerHTML = 0;

That worked.

Author

Commented:
It was the timer that made it work.  You can't reset too soon and no one mentioned that.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial