确认按钮点击后创建圆形进度加载完成提示

这是一款按钮点击后创建圆形进度加载动画的特效，根据不同的完成状态显示不同的执行结果信息，整个过程的动画效果比较流畅连贯，SVG的提示效果也很棒。

分类：html/css > 按钮难易：入门级

查看演示下载资源下载积分： 30 积分

头部需引入3个CSS样式和3个javascript插件：

<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="css/component.css" />
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/uiprogressbutton.js"></script>

body写好个按钮的容器等，部分代码如下：

<div class="box">
	<!-- progress button -->
	<div class="progress-button">
		<button><span>确认提交</span></button>
		<svg class="progress-circle" width="70" height="70"><path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"/></svg>
		<svg class="checkmark" width="70" height="70"><path d="m31.5,46.5l15.3,-23.2"/><path d="m31.5,46.5l-8.5,-7.1"/></svg>
		<svg class="cross" width="70" height="70"><path d="m35,35l-9.3,-9.3"/><path d="m35,35l9.3,9.3"/><path d="m35,35l-9.3,9.3"/><path d="m35,35l9.3,-9.3"/></svg>
	</div><!-- /progress-button -->
	<!-- progress button -->
	<div class="progress-button">
		<button><span>确认提交</span></button>
		<svg class="progress-circle" width="70" height="70"><path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"/></svg>
		<svg class="checkmark" width="70" height="70"><path d="m31.5,46.5l15.3,-23.2"/><path d="m31.5,46.5l-8.5,-7.1"/></svg>
		<svg class="cross" width="70" height="70"><path d="m35,35l-9.3,-9.3"/><path d="m35,35l9.3,9.3"/><path d="m35,35l-9.3,9.3"/><path d="m35,35l9.3,-9.3"/></svg>
	</div><!-- /progress-button -->
</div>

底部需要配合上面引入的javascript插件，实例化进度按钮，代码如下：

[].slice.call( document.querySelectorAll( '.progress-button' ) ).forEach( function( bttn, pos ) {
	new UIProgressButton( bttn, {
		callback : function( instance ) {
			var progress = 0,
				interval = setInterval( function() {
					progress = Math.min( progress + Math.random() * 0.1, 1 );
					instance.setProgress( progress );

					if( progress === 1 ) {
						instance.stop( pos === 1 || pos === 3 ? -1 : 1 );
						clearInterval( interval );
					}
				}, 150 );
		}
	} );
} );