Add A Loading Icon To Any Button

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.

If you liked it, share it


What do you think?