这是一款非常实用的HTML5 SVG带圆形进度条动画的提交按钮特效。该提交按钮在被点击之后，按钮变形为一个圆形的进度条，当进度条运行一周之后，可以设置提交成功和提交失败的两种按钮状态。
制作方法
HTML结构
制作这个提交按钮特效的HTML结构需要一个包裹容器，里面有一个提交按钮和三个元素。
Submit
CSS样式
首先提交按钮容器需要设置为inline-block样式。
.progress-button {
position: relative;
display: inline-block;
text-align: center;
}
然后在为提交按钮提供一些基本样式，并设置过渡动画效果。
.progress-button button {
display: block;
margin: 0 auto;
padding: 0;
width: 250px;
height: 70px;
border: 2px solid #1ECD97;
border-radius: 40px;
background: transparent;
color: #1ECD97;
letter-spacing: 1px;
font-size: 18px;
font-family: 'Montserrat', sans-serif;
-webkit-transition: background-color 0.3s,
color 0.3s, width 0.3s,
border-width 0.3s,
border-color 0.3s;
transition: background-color 0.3s,
color 0.3s, width 0.3s,
border-width 0.3s,
border-color 0.3s;
}
在鼠标滑过提交按钮的时候，修改按钮的背景颜色和文字颜色。
.progress-button button:hover {
background-color: #1ECD97;
color: #fff;
}
所有的SVG元素都采用绝对定位方式来居中对齐，并且不允许有任何的pointer-events。
.progress-button svg {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
SVG的路径没有任何的填充色，只有描边。开始的时候它们是被隐藏起来的，透明度被设置为0。
.progress-button svg path {
opacity: 0;
fill: none;
}
圆形进度条通过设置描边为5个单位来创建。
.progress-button svg.progress-circle path {
stroke: #1ECD97;
stroke-width: 5;
}
当开始loading线程的时候，按钮会变形为圆形，和圆形进度条相同的大小。
.loading.progress-button button {
width: 70px; /* 制作一个圆形 */
border-width: 5px;
border-color: #ddd;
background-color: transparent;
color: #fff;
}
变为圆形后，调教按钮上的文字要快速隐藏起来。
.loading.progress-button span {
-webkit-transition: opacity 0.15s;
transition: opacity 0.15s;
}
.loading.progress-button span,
.success.progress-button span,
.error.progress-button span {
opacity: 0; /* keep it hidden in all states */
}
JAVASCRIPT
在javascript代码中，button是HTML元素，progressEl是SVG元素，它是代表圆形的进度条。successEl和errorEl分别代表提交成功和失败的标记，也是SVG元素。js代码中通过UIProgressButton()方法来初始化这个提交按钮特效。
function UIProgressButton( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}
UIProgressButton.prototype._init = function() {
this.button = this.el.querySelector( 'button' );
this.progressEl = new SVGEl( this.el.querySelector( 'svg.progress-circle' ) );
this.successEl = new SVGEl( this.el.querySelector( 'svg.checkmark' ) );
this.errorEl = new SVGEl( this.el.querySelector( 'svg.cross' ) );
// init events
this._initEvents();
// enable button
this._enable();
}
其它js代码请参考下载文件。
