CODEWITHSUNDEEP
javascriptcsshtmlprogress-bar
HelpingHand
HelpingHand

Reputation: 1065

Alternative to the HTML5 progress bar

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?

Upvotes: 2

Views: 2054

Answers (1)

HelpingHand
HelpingHand

Reputation: 1065

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.

Upvotes: 8

Related Questions