Is the indeterminate progress bar supposed to animate like a barber pole?


I am using the HTML and CSS from the styleguide in Atom 0.175.0 and I was hoping there was a simple way for the indeterminate progress bar to “spin.” If you don’t have it open, for reference, the markup is:

<div class='block'>
    <progress class='inline-block' />
    <span class='inline-block'>Indeterminate</span>

(I’m also not sure where/how that <span> is supposed to render.)

Obviously, I could use the loading spinner instead (<span class='loading loading-spinner-medium inline-block'></span>), but it’s pushing the octocat a little harder than I’d like.


Is this in Atom Dark? I think it is supposed to animate like that, but it doesn’t. Haven’t been able to figure out why not, the markup and css seem to follow the css-tricks examples. So perhaps log a bug? @simurai, any thoughts on this?

In any case, even if it’s not ideal, it’s still best to use the default UI that makes sense for the application.


Hmm… that’s odd. I swear it used to animate. Anyways, it should be fixed in the next update of Atom and One themes. @bolinfest Thanks for noticing.

@braver You might wanna fix it in Isotope too… what seems to work is moving the animation from progress::-webkit-progress-bar to progress:


@leedohm Remember that issue where you tried to add an animation through the Shadow DOM?

Maybe it’s the same with the <progress> that @keyframes defined outside of the Shadow DOM can’t get accessed by an element inside. From the timing it might have changed in Chromium 39/40? Well, just came to mind.


Thanks. Actually, I took the custom progress bars out in favour of the webkit defaults. I’ll investigate again later, but I kinda like how compact the defaults are.


I just built Atom v0.177.0-87c2f44 on Mac OS X 10.10.1 and I’m not seeing an animation in either One Dark or Atom Dark. And yeah, it does sound like that issue, doesn’t it?