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.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Leave a Comment

One thought on “Add A Loading Icon To Any Button

Leave a Reply

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

Other Stuff You Might Like

Looking for Hosting?

Stafford Creative uses and recommends Siteground for fast, reliable hosting for every project and budget.

*Stafford Creative may receive a small commission with each signup.