<div class="container">
  <p>
    Progress bar with a <code>value</code> attribute. The value is set to 80 out of a max of 100.
  </p>
  <progress max="100" min="0" value="80"></progress>
  <p>
    Progress bar without a value; i.e. in an indeterminate state.
  </p>
  <progress max="100"></progress>
</div>
body {
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto 0;
  width: 90%;
  padding: 1em;
}

progress {
  display: block;
  margin-bottom: 40px;
  width: 100%;
  height: 50px;
  /* Reset the default appearance */

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Get rid of default border in Firefox. */

  border: none;
  /* For IE10 */

  color: #0099CC;
}
/* webkit-only styles to change the background color of the progress bar */

progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress::-webkit-progress-value {
  background-color: #0099Cc;
}

progress:indeterminate::-webkit-progress-bar {
  background-color: #aaa;
}
/* Firefox-only styles to change the background color of the value bar */

progress::-moz-progress-bar {
  background-color: #0099Cc;
}
/* indeterminate state styles */

progress:indeterminate:hover {
  cursor: wait;
}