Progress Button Styles

Is there a GitHub repo for this, or a version control link of some kind? The page doesn&#x27;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&#x27;t clarify a license), and the blog post linked in the top right only offers a zip.<p>&lt;&#x2F;rant&gt;<p>I do realize that not everybody subscribes to the &quot;Everything is a repo&quot; 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 :)

This reminds me of this UX Overflow post about the right way to do &quot;Yes, delete it&quot;: <a href="http://ux.stackexchange.com/questions/49991/should-yes-delete-it-be-red-or-green" rel="nofollow">http:&#x2F;&#x2F;ux.stackexchange.com&#x2F;questions&#x2F;49991&#x2F;should-yes-delet...</a><p>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&#x27;t really see the subtle color filling in.

I really love this effect. In use, I would suggest changing the text from &quot;Submit&quot; to &quot;Saving&quot;, to better explain what&#x27;s happening.

This looks great, nice work.<p>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?

Very nice.<p>I mean this as a total compliment: HTML&#x2F;CSS&#x2F;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:<p>[1] <a href="http://www.youtube.com/watch?v=s_nk8PzL0Zw" rel="nofollow">http:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=s_nk8PzL0Zw</a> [2] <a href="http://www.youtube.com/watch?v=OuCAQnWyAiQ" rel="nofollow">http:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=OuCAQnWyAiQ</a>

I like the top-line horizontal version. It&#x27;s consistent with the new &quot;progress bar on top of single-page application&quot; convention.

The folks at Tympanus have thoughtfully included a tutorial for these effects as well. Check it out at <a href="http://tympanus.net/codrops/2013/12/12/progress-button-styles/" rel="nofollow">http:&#x2F;&#x2F;tympanus.net&#x2F;codrops&#x2F;2013&#x2F;12&#x2F;12&#x2F;progress-button-style...</a>.

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

I highly recommend all of tympanus&#x2F;codedrops articles and examples. <a href="http://tympanus.net/codrops/category/playground/" rel="nofollow">http:&#x2F;&#x2F;tympanus.net&#x2F;codrops&#x2F;category&#x2F;playground&#x2F;</a>

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

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

If this sort of thing interests you then I&#x27;d recommend following the Codrops blog. They are always coming up with very innovative and interesting stuff.

Viewing on Chromium, and I can&#x27;t see a single difference in the 10 styles that have &quot;perspective&quot; in the name. Am I just being dense?

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

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

I&#x27;d def go for ROTATE-SIDE-DOWN PERSPECTIVE. Clear, concise and intuitive.

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

Super.

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

ROTATE-ANGLE-LEFT PERSPECTIVE FTW

Why have a progress bar at all? I&#x27;d rather &quot;Submit&quot; and... things happen immediately.<p>I do realise that there&#x27;s probably some server-side things going on when you&#x27;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.<p>If javascript is disabled, these buttons do not work. <i>Always</i> need a fallback plan.<p>I know this is a WIP, and it&#x27;s awesome. Very green though. ;-)