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

Issue fork drupal-1477550

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

nod_’s picture

nod_
Primary language French
Location Lille
commented
Issue tags: +JavaScript, +JavaScript clean-up

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

droplet commented

style UX ref:
http://ux.stackexchange.com/questions/18361/why-do-progress-bars-animate...

kika’s picture

kika commented

See also http://www.red-team-design.com/stylish-css3-progress-bars

kika’s picture

kika commented
Issue summary: View changes

fix

Niklas Fiekas’s picture

Niklas Fiekas commented

Merging in #1484174: Add HTML5 element: <progress>. Also added this issue to the HTML5 overview overview.

W3C: http://dev.w3.org/html5/spec/Overview.html#the-progress-element
WHATWG: http://www.whatwg.org/specs/web-apps/current-work/#the-progress-element

Thank you @kika.

kika’s picture

kika commented

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

Drupal CSS gods, any takers?

robloach’s picture

robloach
he/him
commented
Issue tags: +Proudly Found Elsewhere

jQuery UI 1.9's Progressbar

damien tournoud’s picture

damien tournoud commented

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

robloach
he/him
commented

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

damien tournoud commented

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

robloach
he/him
commented

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

cosmicdreams’s picture

cosmicdreams commented

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

kika commented

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

Crell’s picture

Crell commented

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.

kika’s picture

kika commented

More reference links:

http://caniuse.com/#feat=progressmeter
http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress...
http://wufoo.com/html5/elements/2-progress.html

and there's a new polyfill

https://github.com/jonstipe/progress-polyfill

Crell’s picture

Crell commented

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

kika’s picture

kika commented

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 HTML5 element: <progress>
2. Open new issue "Convert progressbar to <progress>"
3. Open new issue #xxx "Replace progress.gif with CSS3 animation".

Crell’s picture

Crell commented

+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

nod_
Primary language French
Location Lille
commented
Version: 8.x-dev » 9.x-dev

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

nod_’s picture

nod_
Primary language French
Location Lille
commented
Issue summary: View changes

more links

lewisnyman’s picture

lewisnyman
he/him
commented
Issue summary: View changes
Issue tags: +frontend
catch’s picture

catch
he/him
Primary language English
commented
Version: 9.x-dev » 8.x-dev
Issue tags: +minor version target
lewisnyman’s picture

lewisnyman
he/him
commented
Issue tags: +Needs issue summary update

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

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.9 was released on December 7, 2022 and is the final full bugfix release for the Drupal 9.4.x series. Drupal 9.4.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.5.x-dev branch from now on, and new development or disruptive changes should be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

finnsky’s picture

finnsky commented
Version: 9.5.x-dev » 11.x-dev
Issue tags: -JavaScript +JavaScript
andypost’s picture

andypost
he/him
Primary language Russian
commented
Related issues: +#2277551: Add a 'static' variant to the progress bar, +#1484174: Add HTML5 element: <progress>

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.