title: CSS-only ProgressBar with gradient color that highlights current status
body: <p>I was looking for CSS-only <strong>ProgressBar</strong> that shows such activity with a nice looking using gradients and animations.</p>
  
  <p>I investigated <code>&lt;progress&gt;</code> tag but it's <a href="https://css-tricks.com/html5-progress-element/" rel="nofollow noreferrer">very limited in styling</a>, so I looked for other solutions but I was able to find only static examples, or in which <a href="https://css-tricks.com/html5-progress-element/" rel="nofollow noreferrer">gradients are contracted within limits</a> of lowest advance statuses, or in other case a complex markup with many nested <code>DIV</code>.</p>
  
  <p>Desiderata should be:</p>
  
  <ul>
  <li>CSS-only solution </li>
  <li>Gradient background </li>
  <li>Gradient should not be collapsed if progressbar is less than 100% of its completition</li>
  <li>Animated status </li>
  <li>Minimal markup</li>
  </ul>
  
  <p>Could be interesting if it could have also an <em>inderterminate</em> status.</p>