html - 需要一个加载图标以仅使用 CSS 在鼠标点击上显示

Question

有没有办法让加载图标在单击按钮/链接时显示，仅使用 CSS/HTML？

我正在使用 FontAwesome，所以我想我可以使用他们的类来旋转加载图标，但我找不到在特定操作(鼠标单击)后让它旋转的方法。

基本上这就是所有代码:

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

我现在唯一能做的就是把它隐藏在背景颜色中..但这看起来不太专业:

body {
    background: none repeat scroll 0 0 #dcdcdc;
    color: white;
}
.fa {
    color: #dcdcdc;
}
a:active .fa {
    color: red;
}

有什么建议吗？

Answer 1

如果一个看起来像按钮的元素是可以接受的，只要您不需要支持 IE8，您可以使用 CSS 来做到这一点。它通过使用 label “for”复选框或单选按钮作为您的按钮来工作。然后，:checked CSS 伪类就可以解决问题了!

这个例子设置了一个 div 的背景颜色，但是你可以设置任何你需要的属性。

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>