progress:not(value) {
  /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */
progress[value] {
  /* Get rid of the default appearance */
  /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
  width: 11rem;
  /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
  /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  position: relative;
}

progress[value]::before {
  content: attr(value) "%";
  position: absolute;
  right: 0;
  top: 100%;
}

progress[value]::-webkit-progress-bar {
  background-color: whiteSmoke;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
}

progress[value]::-webkit-progress-value {
  position: relative;
  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius: 3px;
  /* Let's animate this */
  z-webkit-animation: animate-stripes 5s linear infinite;
}

.gradient-with-stripes::-webkit-progress-value {
  /* Gradient background with Stripes 135deg,*/
  background-image: -webkit-linear-gradient(90deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #09c, #f44);
}

/*
<progress max="100" value="91" class="gradient-with-stripes" style="width: 20rem;">
    <!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->
    <div>
        tobe ignored
    </div>
</progress>
*/