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.

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

Leave a Comment

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.