Progress Bar as Submit Button

This is an effect I came across a while ago, it’s a neat way of displaying how many required fields have been filled out in a form. It’s not a necessary implementation but a nice bit of UX design. For an example see here: https://www.panic.com/transmit/buy.html (And if you run a Mac their software is some of the best Dev tools I’ve seen so far).

Partial order

Partially Completed Order

Completed Order

A fully filled out order form

So I worked myself up an AngularJS directive, you can see it in action below, just as a whim – it works automatically by dynamically figuring out which elements need to be filled out and which haven’t been filled out. It took a bit to fiddle through the form controller but in the end it’s a fairly elegant solution. Though I wouldn’t recommend using it excessively large forms due to the overhead that may incur. Enjoy!

About Simeon Cheeseman

I enjoy a wide variety of computer and board games, have a BSc in Computer Science and have played percussion for 18 years.

Posted on April 12, 2013, in CSS, Development, HTML, Javascript, Web. Bookmark the permalink. 1 Comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: