Custom color for a indeterminate <progress>-tag without a value
<p>I would like to style a so called 'indeterminate'-progressbar.
(A <code>&lt;progress&gt;</code>-tag without a value)</p>

<pre><code>  &lt;progress max="100"&gt;&lt;/progress&gt;
</code></pre>

<p>See that codepen I found on the net as an example (not mine):</p>

<p><a href="http://codepen.io/anon/pen/mEWqer" rel="nofollow noreferrer">http://codepen.io/anon/pen/mEWqer</a></p>

<p>The difference should be obvious. The Default bar without any style has
movement in it.
What I would like to do, style that indeterminate progressbar so that it keeps 'moving' like the above.</p>

<p>Any means of styling always result in a 'completly' filled bar, without the moving part.</p>

<p>Am I doing something wrong, is that expected or a bug?
Since I am not very good with css, I am a bit at a loss here.
The internet - as far as I found information - only talks about styling normal progressbars.</p>

<p>Edit: Now I am even more confused. It seems to work in Edge.. (the dots seem to be the default 'progressbar' for edge).
So, a bug?
See the attached image from edge.</p>

<p><a href="https://i.stack.imgur.com/KoSGe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KoSGe.png" alt="example from edge"></a></p>

<p>Edit 2:
All of the proposed answers are for a determinate progressbar.
Looking at the codepen I provided (the 'Default'-bar), it should be clear that I mean an indeterminate progressbar.</p>