CircularProgressButton – A tutorial on how to implement the circular progress button concept by Colin Garven. We are using the SVG line drawing animation technique as described by Jake Archibald to animate the circular progress and provide a success and error state to indicate the final status.

2014-11-01 • Plugins • Views: 1275

Today we are going to show you how to implement a nifty progress button concept. The concept is the fabulous Submit Button by Colin Garven. Take a look at it first to get an idea of what steps need to be done, and enjoy the animation. The idea behind the button is the following: once clicked, the submit button is transformed into a circle that will show a progress animation using its border. When the progress animation is finished, the button will expand again and show a checkmark to confirm that the submission is complete, as Colin mentions in a comment. We are going to implement this concept and add another state for the case when the submission fails.

There are quite some possibilities for creating this button and the effect. When thinking about CSS-only techniques, the most challenging part would be the progress circle. There is a smart technique using the clip property for achieving the effect and Anders Ingemann wrote an excellent and very complete tutorial on it (he uses LESS). But we are going to implement this beauty using an SVG based technique with CSS transitions and some JavaScript. For the progress circle, the checkmark and cross in particular, we’ll make use of the animated line drawing technique explained by Jake Archibald.




Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>