Indeterminate Progress Bar Styles

[andrewmunsell]

Description

HTML5 progress bars can either have a value attribute associated with it, or have it omitted. If the value attribute is omitted, then the progress bar is considered indeterminate.

It would be great if Bulma had styles for indeterminate progress bars.

An example of an indeterminate progress bar:

https://codepen.io/anon/pen/eBOjex

<progress></progress>

Versus, a determinate progress bar:

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

[gbritoo27]

@andrewmunsell What king of styles would you want it to have ?

[andrewmunsell]

Generally, an indeterminate progress bar is filled entirely with some sort of animation to indicate that there is activity. The Codepen I posted in the original post shows the native indeterminate progress bar, for example, which shows the basic idea of this.

Another example of indeterminate progress bars (for inspiration, potentially) includes Jquery UI (https://jqueryui.com/progressbar/#indeterminate), which has a basic stripe animation that fills he entire progress bar.

On Nov 4, 2016, at 4:51 AM, Gonçalo Brio notifications@github.com wrote:

What king of styles would you want it to have ?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[connectkushal]

@andrewmunsell

I think this has been added ?
http://bulma.io/documentation/elements/progress/

[andrewmunsell]

@connectkushal No, those are not indeterminate progress indicators

[connectkushal]

Ah, my bad. At least the issue got bumped 😬

[sohailalam2]

Hi @jgthms,

Whats the progress on this issue? Looks like its open since Nov 2016!! Are there any plans or workaround available currently?

Thanks

[scottwernervt]

I put together a codepen demonstrating indeterminate progress bars. The code was sourced from spectre.css. I am not a fan of the animation and was hoping someone could come up with a better look/feel as I am new to CSS. I can create a pull request or make it a bulma extension.