If you’ve read some of my other blog posts about SASS mixins or checkboxes you’ll know I’m a huge fan of minimalist code – hence the SASS below can actually be used as an :after or :before pseudo on most elements. This comes in really handy for buttons. If your user has just submitted a form, apply a class like ‘.button-loading’ to the button and in your CSS trigger a :before pseudo selector that extends the .loader-circle-dark (or -light) code – voila you have a spinner over the button. A nice handy trick here to get rid of the text underneath is to force color: transparent !important; to hide the text color ;).
Note: the below code requires a transform mixin – get my latest mixin list here, and the loaders I use are hidden by default!. Use Jquery to show them, or simply replace display: none; with display: inline-block (for inline loaders), or display: block; for positioned loaders.
Well, as always – brief and fun. Enjoy!