

Progress Button Styles - madisonmay
http://tympanus.net/Development/ProgressButtonStyles/

======
akerl_
Is there a GitHub repo for this, or a version control link of some kind? The
page doesn't appear to offer any way to get the code short of yanking it from
source (which seems less than ideal because the page doesn't clarify a
license), and the blog post linked in the top right only offers a zip.

</rant>

I do realize that not everybody subscribes to the "Everything is a repo"
philosophy that holds sway for me, and that tarballs and the like are still
used by a significant portion of the internet to share code. I just wish I
could sell more people on The Repo Way :)

~~~
vobios
[https://github.com/codrops/ProgressButtonStyles](https://github.com/codrops/ProgressButtonStyles)

~~~
akerl_
<3 Thanks!

------
andrewljohnson
This reminds me of this UX Overflow post about the right way to do "Yes,
delete it": [http://ux.stackexchange.com/questions/49991/should-yes-
delet...](http://ux.stackexchange.com/questions/49991/should-yes-delete-it-be-
red-or-green)

I think a more contrasting approach to color is likely better - maybe you
start with a green button, which goes Gray on click, and then fills with
brighter green. This will avoid issues with color-blindness, or even just
myopia, where people won't really see the subtle color filling in.

------
foz
I really love this effect. In use, I would suggest changing the text from
"Submit" to "Saving", to better explain what's happening.

~~~
tripzilch
> changing the text from "Submit" to "Saving", to better explain what's
> happening

I took a similar idea from a small remark in the recent "what I would do if I
were Tarsnap" article. It made me wonder who uses the verb "submit" nowadays,
what meaning does it have to users that are not web-developers (and
immediately think of `<input type="submit">`)?

Arguably it makes sense because you are submitting a form to web server, but
what common user really thinks of this action in that way?

Maybe this is super obvious to some people, but I was reminded that you can
put pretty much any verb in context there, and it'll probably be better than
"submit".

------
lostsock
This looks great, nice work.

Do people using this sort of thing (or the YouTube style top of the page
loading bar) actually get back real % completed values from the server or do
they just use it to show that _something_ is happening?

~~~
refrigerator
I think the vast majority of sites just make the progress bar move in a way
such that it appears to be loading quickly/making progress, but when the
server is finally ready the bar just jumps to the end.

~~~
Gigablah
Internet Explorer on Windows Mobile does this too. If your connection drops
out, the progress bar continues to move towards 90%, then gets stuck there
forever. It's maddening.

~~~
ygra
That being said, giving a good estimation of page load time is downright
impossible.

You don't know in advance how many resources you need to load, you don't know
in advance how large they'll be, or how long the DNS reply will take ...

If you don't want the scrollbar to move backwards, you can just give a rough
approximation of progress, if any. And if you just wait until you certainly
know how long it's going to be you're probably almost finished anyway.

I guess there's a reason web browsers nowadays just use a little spinner that
says »I'm doing ... uhm ... _something_!« instead of them pretending »I'm 46.5
% done«.

~~~
oneeyedpigeon
You can't do this very accurately, sure, but you can add some meaning - e.g.
report back when each of a number of known steps is completed. That gives a
vague idea of whether we're talking seconds or minutes. I might be able to do
something else once I know a specific step is complete.

------
zhte415
Very nice.

I mean this as a total compliment: HTML/CSS/JS seems to be quickly catching up
to the opening scenes of my two favourite news shows from the 1990s: The Day
Today [1] and Brass Eye [2]. Thirty second clips of those scenes for each
below:

[1]
[http://www.youtube.com/watch?v=s_nk8PzL0Zw](http://www.youtube.com/watch?v=s_nk8PzL0Zw)
[2]
[http://www.youtube.com/watch?v=OuCAQnWyAiQ](http://www.youtube.com/watch?v=OuCAQnWyAiQ)

------
Gigablah
I like the top-line horizontal version. It's consistent with the new "progress
bar on top of single-page application" convention.

------
madisonmay
The folks at Tympanus have thoughtfully included a tutorial for these effects
as well. Check it out at [http://tympanus.net/codrops/2013/12/12/progress-
button-style...](http://tympanus.net/codrops/2013/12/12/progress-button-
styles/).

------
hiphopyo
Some might argue that buttons should remain buttons and loaders should remain
loaders.

~~~
andrewljohnson
After thinking about it for a minute, I don't have an opinion on your comment
either way, but I think it's a good question to ask.

This control is more concise than two controls, which is nice especially on
mobile. But, we could easily hide the button with animation, and replace it
with a classic loader. Can we say anything about which approach is better,
without empirical data?

I excitedly up-voted the post after clicking a few buttons, and I think the
author is a creative and clever person either way!

------
bliker
I highly recommend all of tympanus/codedrops articles and examples.
[http://tympanus.net/codrops/category/playground/](http://tympanus.net/codrops/category/playground/)

------
sferoze
The site has an amazing collection of UI experiments and tutorials! Love it!

------
frozenport
This page is too green. Can you try with a white background?

~~~
svantana
You can try it yourself, just open firebug/Chrome Developer Tools and edit the
body CSS. Don't rely on others to do for you what you can just as easily do
yourself.

------
daledavies
If this sort of thing interests you then I'd recommend following the Codrops
blog. They are always coming up with very innovative and interesting stuff.

------
bendmorris
Viewing on Chromium, and I can't see a single difference in the 10 styles that
have "perspective" in the name. Am I just being dense?

~~~
ajanuary
It says at the top "Without support for transform-style: preserve-3d you will
see the fallback style (fill horizontal)." I think support for it is a little
flaky on certain linux/graphics driver combos.

------
sahaskatta
Neat. It would be even nicer if it had hover and active states for the buttons
as well.

------
bjz_
I love the whimsy present in some of these, especially in `flip-open
perspective`.

------
yconst
I'd def go for ROTATE-SIDE-DOWN PERSPECTIVE. Clear, concise and intuitive.

------
ajkumar1992
This is exactly what i was looking for a long time.

------
piyushco
Super.

------
teemo_cute
I would like to see a version where the progress bar fill-color gets brighter
colors as it nears completion.

------
okonomiyaki3000
ROTATE-ANGLE-LEFT PERSPECTIVE FTW

~~~
PavlovsCat
I hear you. I never saw this before, and it's rare to see a new concept in UI
for the very first time. So that one had me slightly excited, too :)

Though I generally dislike loading bars for images (I prefer progressive
jpeg), some sites do insist on using them, and I think this particular effect
could look fantastic for thumbnails. And enhanced to use two colors, it could
also be used to indicate buffering status and seek position when playing short
audio samples (a gallery of birds and their song is the first thing that comes
to mind haha)

------
veb
Why have a progress bar at all? I'd rather "Submit" and... things happen
immediately.

I do realise that there's probably some server-side things going on when
you've submitted, but you could do that at the very last form input, and once
the button is pressed, magic appears. No loading, no progress bars.

If javascript is disabled, these buttons do not work. _Always_ need a fallback
plan.

I know this is a WIP, and it's awesome. Very green though. ;-)

~~~
mantrax4
Explain yourself why we "always need a fallback plan" if JS is disabled.

Without saying "screen readers", as they're 90%+ JS enabled these days.

~~~
instakill
Because millions of people use Opera Mini 4.x which does not support most
JavaScript functions.

~~~
sutterbomb
Millions of people are not using Opera Mini 4.x on any sites I actually work
on. They constitute a small fraction of a percent of total visitors. The
opportunity cost of developing fallbacks for them is simply too high when we
could be developing additional improvements for the vast majority of our
userbase.

~~~
PavlovsCat
Additional improvements, or bling? That's kind of the point, breaking
functionality for mere shinyness is silly. If you need javascript anyway,
that's different of course.

