6 ms·

Progress Button Styles

287 points by madisonmay 13y ago

foz 13y ago
I really love this effect. In use, I would suggest changing the text from "Submit" to "Saving", to better explain what's happening.
- michaelmior 13y ago
  My first thought was to throw on a loading spinner, but changing the text sounds like a much better idea :)
- tripzilch 13y ago
  > 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".
zhte415 13y ago
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
ajkumar1992 13y ago
This is exactly what i was looking for a long time.
lostsock 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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 13y ago
        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.
frozenport 13y ago
This page is too green. Can you try with a white background?
- danieltillett 13y ago
  I don't mind the green, but trying to read green on green is a bit hard.
- svantana 13y ago
  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.
- Gracana 13y ago
  Mhmm, it took a few seconds for my eyes to re-adjust once I came back to HN. I wonder if there's a threshold for color balance where it starts to noticeably alter your perception of other colors?
sahaskatta 13y ago
Neat. It would be even nicer if it had hover and active states for the buttons as well.
Gigablah 13y ago
I like the top-line horizontal version. It's consistent with the new "progress bar on top of single-page application" convention.
teemo_cute 13y ago
I would like to see a version where the progress bar fill-color gets brighter colors as it nears completion.
daledavies 13y ago
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.
okonomiyaki3000 13y ago
ROTATE-ANGLE-LEFT PERSPECTIVE FTW
- PavlovsCat 13y ago
  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)
bliker 13y ago
I highly recommend all of tympanus/codedrops articles and examples. http://tympanus.net/codrops/category/playground/ http://tympanus.net/codrops/category/playground/
veb 13y ago
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 13y ago
  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 13y ago
    Because millions of people use Opera Mini 4.x which does not support most JavaScript functions.
    - sutterbomb 13y ago
      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 13y ago
        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.
    - mantrax4 13y ago
      We're talking about a submit button here. You're claiming, millions are filling in long web forms with their feature phone numpad keys? Give me a break.
akerl_ 13y ago
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 :)
- davemoyes 13y ago
  http://tympanus.net/codrops/licensing/ http://tympanus.net/codrops/licensing/
  - akerl_ 13y ago
    That's not really a license and more of a tl;dr. There's a lot of value in picking an existing license to ensure people know what's up, and also that it can hold up legally if you need it to. EDIT: To clarify, yes, I know that putting it there makes it "their license", and if I were to use code from their site I would adhere to it. My concern is that, because it's not actively shown when viewing the code itself, and because it's a roll_your_own license, it impacts how comfortable I'd feel taking the code and using it as part of other projects.
    - aranjedeath 13y ago
      Yeah. I won't touch these because of that license. It's essentially CC-SA, but with this: "You are not allowed to take our work “as-is” and sell it, redistribute or re-publish it, or sell simple “pluginized” versions of it." NOPE. mit/bsd/isc/lgpl/apl or compatible or bust.
- vobios 13y ago
  https://github.com/codrops/ProgressButtonStyles https://github.com/codrops/ProgressButtonStyles
bendmorris 13y ago
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 13y ago
  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.
bjz_ 13y ago
I love the whimsy present in some of these, especially in `flip-open perspective`.
madisonmay 13y ago
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-styles/ http://tympanus.net/codrops/2013/12/12/progress-button-style....
sferoze 13y ago
The site has an amazing collection of UI experiments and tutorials! Love it!
deleted 13y ago
[deleted]
hiphopyo 13y ago
Some might argue that buttons should remain buttons and loaders should remain loaders.
- andrewljohnson 13y ago
  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!
- hcarvalhoalves 13y ago
  Once the user clicks "Submit" you have to disable the button to avoid double submission, so might as well replace with a progress indicator.
andrewljohnson 13y ago
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-delete-it-be-red-or-green http://ux.stackexchange.com/questions/49991/should-yes-delet... 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.
yconst 13y ago
I'd def go for ROTATE-SIDE-DOWN PERSPECTIVE. Clear, concise and intuitive.
piyushco 13y ago
Super.

287 points by madisonmay 13y ago

foz 13y ago

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

michaelmior 13y ago
My first thought was to throw on a loading spinner, but changing the text sounds like a much better idea :)
tripzilch 13y ago
> 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".

zhte415 13y ago

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

ajkumar1992 13y ago

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

lostsock 13y ago

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 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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.

frozenport 13y ago

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

danieltillett 13y ago
I don't mind the green, but trying to read green on green is a bit hard.
svantana 13y ago
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.
Gracana 13y ago
Mhmm, it took a few seconds for my eyes to re-adjust once I came back to HN. I wonder if there's a threshold for color balance where it starts to noticeably alter your perception of other colors?

sahaskatta 13y ago

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

Gigablah 13y ago

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

teemo_cute 13y ago

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

daledavies 13y ago

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.

okonomiyaki3000 13y ago

ROTATE-ANGLE-LEFT PERSPECTIVE FTW

PavlovsCat 13y ago
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)

bliker 13y ago

I highly recommend all of tympanus/codedrops articles and examples. http://tympanus.net/codrops/category/playground/ http://tympanus.net/codrops/category/playground/

veb 13y ago

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 13y ago
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 13y ago
  Because millions of people use Opera Mini 4.x which does not support most JavaScript functions.
  - sutterbomb 13y ago
    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 13y ago
      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.
  - mantrax4 13y ago
    We're talking about a submit button here. You're claiming, millions are filling in long web forms with their feature phone numpad keys? Give me a break.

akerl_ 13y ago

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 :)

davemoyes 13y ago
http://tympanus.net/codrops/licensing/ http://tympanus.net/codrops/licensing/
- akerl_ 13y ago
  That's not really a license and more of a tl;dr. There's a lot of value in picking an existing license to ensure people know what's up, and also that it can hold up legally if you need it to. EDIT: To clarify, yes, I know that putting it there makes it "their license", and if I were to use code from their site I would adhere to it. My concern is that, because it's not actively shown when viewing the code itself, and because it's a roll_your_own license, it impacts how comfortable I'd feel taking the code and using it as part of other projects.
  - aranjedeath 13y ago
    Yeah. I won't touch these because of that license. It's essentially CC-SA, but with this: "You are not allowed to take our work “as-is” and sell it, redistribute or re-publish it, or sell simple “pluginized” versions of it." NOPE. mit/bsd/isc/lgpl/apl or compatible or bust.
vobios 13y ago
https://github.com/codrops/ProgressButtonStyles https://github.com/codrops/ProgressButtonStyles

bendmorris 13y ago

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 13y ago
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.

bjz_ 13y ago

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

madisonmay 13y ago

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-styles/ http://tympanus.net/codrops/2013/12/12/progress-button-style....

sferoze 13y ago

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

deleted 13y ago

[deleted]

hiphopyo 13y ago

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

andrewljohnson 13y ago
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!
hcarvalhoalves 13y ago
Once the user clicks "Submit" you have to disable the button to avoid double submission, so might as well replace with a progress indicator.

andrewljohnson 13y ago

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-delete-it-be-red-or-green http://ux.stackexchange.com/questions/49991/should-yes-delet... 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.

yconst 13y ago

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

piyushco 13y ago

Super.