Re#736 - Progress Bar

[wesruv]

Blocked There are some comments related to Fieldsets at backdrop-ops/styleguide#11 Please hold off on this ticket until they are addressed there.

See master issue for instructions/guidelines for implementation: https://github.com/backdrop/backdrop-issues/issues/736

[klonos]

DISCO YEAH!!!

Can we please keep it simple and use an alteration of the #0494DB and #0C5E89 blues used for button normal and hover states (for the sake of color palette consistency)?

...no pun intended there with disco vs. blues :stuck_out_tongue:

Something like this perhaps:

generated using http://cssload.net

[docwilmot]

FWIW, I'm diggin the disco.

[quicksketch]

During our call yesterday, we agreed that the progress bar was a little too fluorescent. Darius is finding a way to tone it down a little bit.

[Bojhan]

This is indeed a bit much.

Its mostly the color scheme that is off, you generally don't do the color A, color B, color A, etc. approach anymore (that's kinda 99').

Some approaches:

Or the most awesome one:

[klonos]

Or the most awesome one:

Good one!! :laughing:

[dariusgarza]

Updated status bar: http://codepen.io/anon/pen/VLLrRV

[quicksketch]

This looks a lot better. The animation is a little jumpy when it repeats, but I think that's probably an implementation issue. The current bar also only works in Chrome, but I think that's just missing the appropriate properties for other browsers.

[klonos]

The current bar also only works in Chrome, but I think that's just missing the appropriate properties for other browsers.

Yep, I opened the link provided above in firefox last night to check how it looks and all I got was a grey bar.

[wesruv]

Yeah, I think we can fix that in implementation, at minimum IE8 and some older browsers will get a green bar. All modern browsers should get a kickass smooth animation.

[wesruv]

@dariusgarza and whoever's interested, look good? http://codepen.io/wesruv/pen/vOOQRz?editors=010

[wesruv]

Here's a PR for what I came up with. Increased the height to 40px per the original styleguide, let me know if that isn't what we want in the final. https://github.com/backdrop/backdrop/pull/866

[quicksketch]

Thanks @wesruv! A few things I noticed in testing:

• For some reason the background color is black in Firefox and the gradient isn't stretched across the bar:

• Could we add a transition to the width property so that the bar doesn't jump between iterations? It's common for something like the installer to jump from 0 to 40% to 80% to 100%, we should transition between those widths.
• I get the feeling that this progress bar might be too styled for generic use. How would you feel about putting these styles in style.css and leaving the current bar as-is (except for adding the CSS transition).

BTW, we have a completely separate issue for transitions, we can close that one as duplicate if we handle it here: #643.

[quicksketch]

The PR at https://github.com/backdrop/backdrop/pull/866 has been closed (boo!) because I deleted the 1.x-new-style branch after we merged into 1.x (yay!) We had some feedback that needed to be addressed anyway, but when you get the chance please file again directly against the 1.x branch.

[quicksketch]

Thanks, this looks great @wesruv! I tested the installer and simpletest running and everything works the way I would expect. Great job!