Need a loading icon to show on a mouseclick with just CSS - html

Question

Is there a way to get a loading icon to show when a button/link is clicked, with just CSS/HTML?
I'm using FontAwesome so I figured I could use their classes to spin a loading icon, but I can't find a way to get it to spin after a specific action (mouseclick).
Basically this is all the code:
<i class="fa fa-circle-o-notch fa-spin"></i> Spin
The only way I could manage now was hiding it in background color.. but that doesn't seem very professional:
body {
background: none repeat scroll 0 0 #dcdcdc;
color: white;
}
.fa {
color: #dcdcdc;
}
a:active .fa {
color: red;
}
Any suggestions?

Answer 1

If an element that looks like a button is acceptable, you can do this with CSS as long as you don't need to support IE8. It works by using a label "for" a checkbox or radio as your button. Then, the :checked CSS pseudo class does the trick!
This example sets the background color of a div, but you can set whatever properties you need.
label {
display: inline-block;
background-color: #28529c;
color: white;
padding: 4px 8px;
}
#loading {
background-color: transparent;
width: 20px;
height: 20px;
}
#hidden-flag {
display: none;
}
#hidden-flag:checked ~ #loading {
background-color: green;
display: inline-block;
padding-left: 10px;
}
<input id="hidden-flag" type="radio">
<label for="hidden-flag">Button</label>
<div id="loading"></div>

Answer 2

Needs a bit of work, But as I'm off to beddy byes now I'm not carrying on with it, Up early tomorrow. Pure css sort of unfinished example. When the new page is loaded just bring in a new set of buttons to click.
#to_click:visited {
content:"";
display: block;
float: left;
position: relative;
margin: 40px 30px;
border-radius: 100px;
width: 20px;
height: 20px;
border: 5px solid #57E;
border-top-color: transparent;
border-bottom-color: transparent;
animation-name: rotateclock;
animation-duration: .75s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#to_click:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 100px;
width: 10px;
height: 10px;
border: 5px solid #57E;
border-left-color: transparent;
border-right-color: transparent;
}
#to_click:after {
content: "";
display: block;
position: absolute;
top: 5px;
left: 5px;
border-radius: 100px;
width: 0px;
height: 0px;
border: 5px solid #57E;
border-top-color: transparent;
border-bottom-color: transparent;
}
#keyframes rotateclock {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Click Me