带过渡的加载按钮（两个旋转的箭头）

Question

我想在问题之后创建类似于此加载按钮的内容。这个旋转按钮可以用纯CSS加载任何东西（不计算它会在点击中旋转，它将通过JS完成）。也许有人做过类似的事情？或者至少知道如何做到这一点。我只知道这可能是transition。

UPD 即可。没有图像和图标。我的问题是，如何创建这种边框（两个箭头），并在点击时旋转它们（可以用JS完成）。

以下是此按钮的示例：

Answer 1

使用FontAwesome和内置的CSS3旋转

<强> jsBin demo

＆＃13;

＆＃13;

i.fa-refresh{ color: #a05; }

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<i class="fa fa-refresh fa-spin fa-2x"></i>

＆＃13;

＆＃13;

＆＃13;

https://fortawesome.github.io/Font-Awesome/icons/
https://fortawesome.github.io/Font-Awesome/examples/

加载图标（使用纯CSS和CSS3 animation）

＆＃13;

＆＃13;

.loading{
  display:inline-block;
  position:relative;
  vertical-align:middle;
  width:  24px;
  height: 24px;
  border:2px solid transparent;
  border-top-color:#a05;
  border-bottom-color:#a05;
  border-radius:50%;
  animation: rotate 3s linear infinite;
}
.loading:after,
.loading:before{
  position:absolute;
  content: "";
  width:0; height:0;
  border:6px solid transparent;
  border-bottom-color:#a05;
}
.loading:after{
  top:1px;
  right:-7px;
  transform: rotate(135deg);
}
.loading:before{
  top:11px;
  left:-7px;
  transform: rotate(-45deg);
}
@keyframes rotate{
   to { transform: rotate(360deg); }
}

＆＃13;

<span class="loading"></span>

＆＃13;

＆＃13;

＆＃13;

将它与jQuery一起使用将结束如下：
的 jsBin demo

Answer 2

在这里查看codepen（公平指出：不是我的codepen），了解如何创建一个类似于css的箭头，就像你在想的那样：     http://codepen.io/artemdemo/pen/fLcCn/ 转换效果不可能进行循环，但只有假设你已经拥有旋转图标才可能使用css，只需制作一个悬停动画，如：

.rotate{
    animation: rotate ease infinite;
}

@keyframes rotate{
   to{ transform: rotate(360deg); }
   from { transform: rotate(0deg); }
}

然后单击添加类旋转到元素

Answer 3

您可以使用Cursor URL property并将其链接到您的微调器的动画GIF。

Reflections reflections = new Reflections(this.getClass().getPackage().getName(), 
        new SubTypesScanner(false));
Set<String> classes = reflections.getAllTypes(); // Throws runtime error