It’s human nature to want to speed things up. This is doubly true when people are dealing with interactive elements on websites. Whether you have a form with slow load times or a forum post that takes longer than a few clicks to submit, it’s a good idea to let people know that something is happening.

Today I’ll be dealing with a standard Submit button from a form that takes longer than people would like to finish loading. It’s fairly straightforward and all you’ll need is the id or class of the button. 

This example uses :before and :focus Pseudoclasses with a Font Awesome spinner. 

See the Pen
Add Spinner to Input Button by Cori (@fmbns)
on CodePen.

As this is a slightly hacky solution that doesn’t give any real feedback, it’s best for use on buttons that will submit an action and reload or redirect to another page.