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

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:

<a href="#"><i class="fa fa-circle-o-notch fa-spin"></i> Spin</a>

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?

No, what you're trying to do is not possible using only HTML and CSS as you're looking for an event handler (button click) See this link: http://stackoverflow.com/questions/19260401/change-background-on-button-click-using-css-only You will need to use a non-markup language such as JavaScript/jQuery. See the difference between a "Markup Language" and a "Programming Language" here: http://infospace.ischool.syr.edu/2012/04/05/why-html-is-not-a-programming-language/ — ctwheels, Oct 30 '14 at 22:34

score 0 · Answer 1 · answered Oct 30 '14 at 23:05

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>

This is all pretty far out of my comfort-zone (I'm only familiar with basic HTML/CSS), but the button i'm trying to style is in Wordpress (WooCommerce): `

` I'm not sure if your code is applicable to that. — CrossY, Oct 30 '14 at 23:46
@CrossY Yeah, since your button needs to submit a form, you can't use my solution without using JavaScript, at which point you could just use JavaScript to show the loading icon. — Talmid, Oct 31 '14 at 02:25

score 0 · Answer 2 · answered Oct 30 '14 at 23:44

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); }
}

<a href="#" id="to_click">Click Me</a>

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

2 Answers2