-1

I am trying to set progress bar width from css. is there any way to do that? Here's the test example for firefox from jsfiddle https://jsfiddle.net/dfkLexuv/

html

<progress class="progressBar" value="50" max="100">50 %</progress>

css

.progressBar::-moz-progress-bar{
  background-color: red;
  width: 90%;
}
User7354632781
  • 2,174
  • 9
  • 31
  • 54

1 Answers1

0

I don't think you can edit a progress tag's value amount with CSS, but you could make your own "custom" progress bar with two divs, like this.

.progress-bar-outer {
  width: 300px;
  height: 40px;
  
  background-color: gray;
}

.progress-bar-inner {
  height: 100%;

  display: inline-block;
  margin: 0;
  float: left
}

.red {
  /* You can change the `width` to change the amount of progress. */
  width: 35%;
  background-color: red;
}

.green {
  /* You can change the `width` to change the amount of progress. */
  width: 20%;
  background-color: green;
}
<div class="progress-bar-outer">
  <div class="progress-bar-inner red">
  </div>

  <!-- Multiple bars can be placed next to each other! -->
  <div class="progress-bar-inner green">
  </div>
</div>
Marco
  • 2,004
  • 15
  • 24
  • if i add one more css class say `.progress-bar-inner2 { width: 50%; height: 100%; background-color: green; } ` can i stack both progress bars next to each other – User7354632781 Jul 14 '17 at 15:56