HTML5 - Styling a Progress Bar

by Fahd Shariff

HTML

<progress value="80" max="100"></progress>
<progress value="100" max="100"></progress>

CSS

progress[value]  {
  -webkit-appearance: none;

  width: 200px;
  height: 20px;

  /* remove border in Firefox */
  border: none;

  /* IE */
  color: red;
}

/* Chrome */
progress[value]::-webkit-progress-bar {
  background-color: #eee;
}

progress[value]::-webkit-progress-value {
  background-color: red;
}

progress[value="100"]::-webkit-progress-value  {
  background-color: green;
}

/* Firefox */
progress[value]::-moz-progress-bar {
  background-color: red;
}

progress[value="100"]::-moz-progress-bar  {
  background: green;
}

/* IE */
progress[value="100"]  {
  color: green;
}