It's time to do it again: bring progressbar to next level. It's a follow-up for #653620: Bring progressbar to the modern era and #902490: progress.gif doesn't tile properly.

Problem:

- Our current progressbar is hard to maintain (it needs access to original Photoshop assets) and re-style / build on top of it.
- Its blue hue is not in sync with core themes :)
- It does not use semantic markup / HTML5

Proposal:

1. Create new "backend" for progressbar. Options:

- HTML5 http://caniuse.com/#feat=progressmeter and http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress... and http://lea.verou.me/polyfills/progress/
- jQuery UI progressbar http://jqueryui.com/demos/progressbar
- Something similar to current div/class markup, refreshed.

2. Style it using modern technologies, drop animated GIF background. Options:

- HTML5 default styling
- Emulate current design using CSS3: http://css-tricks.com/css3-progress-bars/ and http://twitter.github.com/bootstrap/components.html#progress and https://github.com/twitter/bootstrap/blob/master/less/progress-bars.less
- Combination of two above

Comments

nod_’s picture

Oh yes please. I'd very much like to use jQuery UI for this. And at least clean up the JS for the progressbar.

droplet’s picture

kika’s picture

kika’s picture

Issue summary:View changes

fix

Niklas Fiekas’s picture

kika’s picture

More CSS3 animated bars http://www.leemunroe.com/css3-animated-loading-bar/

Drupal CSS gods, any takers?

RobLoach’s picture

Damien Tournoud’s picture

Just a side note: this needs to work without Javascript, so most of the markup needs to be in the HTML source. I'm not sure jQuery UI progressbar supports that.

RobLoach’s picture

Just a side note: this needs to work without Javascript, so most of the markup needs to be in the HTML source. I'm not sure jQuery UI progressbar supports that.

jQuery UI is both a JavaScript framework, and a CSS framework. The progress bar doesn't need JavaScript to work. I've put together an example of jQuery UI ProgressBar working without JavaScript.

Damien Tournoud’s picture

jQuery UI is both a JavaScript framework, and a CSS framework.

Well, yes. Except that the CSS framework needs all those non-semantic classes that are usually added by the Javascript (ie. ui-corner-all, ui-corner-left, etc.). I think the <progress> element is a better bet moving forward.

RobLoach’s picture

Oh, if we were to use straight up HTML5's <progress>, I'd opt for that.

cosmicdreams’s picture

I'm all for using the HTML 5 version of progressbar. If we go that route we'll have to implement a fallback for browsers that Drupal 8 supports that don't support the element:

http://caniuse.com/#search=progress

kika’s picture

See issue summary "1. HTML option" there are links for browser support and polyfills.

Crell’s picture

I am entirely +1 on using the HTML5 progress bar and then providing a fallback.

I'd even be OK with that fallback not being pretty on non-supporting browsers and requiring Javascript, as long as the page actually loads and the batch process completes.

Crell’s picture

So who's writing the patch to use the progress element? Volunteers?

kika’s picture

I'd propose to split this issue to move faster and to target the tasks to contributors with different expertises (CSS / JS). This issue could stay as a meta-issue.

1. Re-open #1484174: Add new HTML5 FAPI element: progress
2. Open new issue "Convert progressbar to <progress>"
3. Open new issue #xxx "Replace progress.gif with CSS3 animation".

Crell’s picture

+1 to #19. I'm not doing those myself because it feels wrong creating new issues that I know I'm not going to get close to working on, but I'll cheer from the sidelines. :-)

nod_’s picture

Version:8.x-dev» 9.x-dev

A dependency for this has been pushed to D9, pushing this one too.

nod_’s picture

Issue summary:View changes

more links

LewisNyman’s picture

Issue summary:View changes
Issue tags:+frontend
catch’s picture

Version:9.x-dev» 8.x-dev
Issue tags:+minor version target
LewisNyman’s picture

We can reduce the scope of this issue a little I think. The CSS for the progress bar is now CSS3.