Styling HTML5 progress Element

dabblet.css

/**
 * Styling HTML5 progress Element
 */

progress[value] {
  appearance: none;
  position: relative;
  width: 500px;
  height: 30px;
}
progress[value]::after {
  content: attr(value) "%";
  color: #465298;
  line-height: 30px;
  position: absolute;
  top: 0;
  right: -4.5em;
  width: 4em;
}
progress[value]::-webkit-progress-bar {
  background: none;
  border: 3px solid #465298;
  border-radius: 1.5em;
  overflow: hidden;
}
progress[value]::-webkit-progress-value {
  background: linear-gradient(-45deg, #606dbc 32%, #465298 33%, #465298 66%, #606dbc 67%);
  background-size: 50px 100%;
  animation: flow 2s linear infinite;
}
@keyframes flow {
  to { background-position: -50px 0 }
}

dabblet.html

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

dabblet.js

var progress = document.querySelector("progress[value]");
setInterval(function () {
    if (++progress.value > 100) progress.value = 0;
}, 100);

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}