2

Background

From what I have seen, support for the HTML5 progress bar remains sporadic and methods to make it appear the same in every browser or operating system are often complicated.

different styles

http://www.hongkiat.com/blog/html5-progress-bar/ shows how to create multiple psuedo-classes in css that attempt to influence the progress element's styling in every browser.

progress {
    /* style rules */
}
progress::-webkit-progress-bar {
    /* style rules */
}
progress::-webkit-progress-value {
    /* style rules */
}
progress::-moz-progress-bar {
    /* style rules */
}

This seems to be a very bloated method given that the styling would be completely relying on experimental compatibility rules.

More info on styling the HTML5 progress element: https://css-tricks.com/html5-progress-element/

Question

Is there a simpler one-step solution to making a universal progress bar using HTML, CSS, and Javascript?

HelpingHand
  • 1,045
  • 11
  • 26

1 Answers1

7

Yes. The simplest way of doing this is by placing a span within another span. Then, all styling can be universal with almost every browser and operating system, and you may simply modify the inner span's width property with Javascript to change its value.

<span id="progressContainer">
  <span id="progress" style="width:50%;"></span>
</span>

<style>
#progressContainer {
  display: inline-block;
  width: 400px;
  height: 4px;
}

#progress {
  display: block;
  height: 100%;
  background-color: green;
}
</style>

I made this codepen as an example of just how powerful this method is.

HelpingHand
  • 1,045
  • 11
  • 26
  • So i have a questions based on JS code in codepen, where you make a recursive call can that be substituted with setInterval() instead? – Raj Sep 11 '15 at 18:34
  • 2
    @Raj Yes, absolutely. I tend to use setTimeout because you can easily stop it from running by controlling its loop directly. I guess it all depends on your personal usage. If you're just running an endless loop, it won't really matter. – HelpingHand Sep 11 '15 at 18:41
  • @HelpingHand there is a difference actually http://stackoverflow.com/a/731625/817632 – Olga Aug 10 '16 at 19:06
  • 2
    @HelpingHand - Very Cool Progress bar, i like it – N Khan Sep 19 '17 at 05:49