将按钮转换为加载圈动画

Question

我想重现下面的动画：

http://gph.is/1MILWlq

我找到了这个，但我没有进度条（加载时间不会定义）：

http://tympanus.net/Tutorials/CircularProgressButton/

我该怎么做？

Answer 1

您可以添加一个事件侦听器以临时替换它与图像，然后让ajax（或任何发生的事件）的回调执行替换它。在我的例子中，我只是使用setTimeout让它在3秒后再次替换按钮。通常，该功能将进入ajax回调（或其他任何等待的内容）：

这是一个jsFiddle示例：https://jsfiddle.net/jetweedy/m0qpm1xh/2/

var myButton = document.getElementById('myButton');
var myParent = document.getElementById('myParent');
myButton.onclick = function() {
    myParent.removeChild(myButton);
    var myImage = document.createElement("img");
    myImage.src = "http://chimplyimage.appspot.com/images/samples/classic-spinner/animatedCircle.gif";
    myParent.appendChild(myImage);
    setTimeout(function() {
        myParent.removeChild(myImage);
        myParent.appendChild(myButton);
    }, 3000);
};

另一种方法是编写一些JavaScript来逐渐减少/增加其大小，位置，颜色和其他属性，同时处理它正在处理的任何内容，然后（再次，在回调中）停止所有这些（通过完成后，结束你已启动的setInterval。