html5圆形进度条加载按钮.zip资源-CSDN文库

共8个文件

css：3个

js：3个

jpg：1个

版权申诉

javascript

jQuery

html5

85 浏览量 2022-11-19 19:46:15 上传评论收藏 36KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html5圆形进度条加载按钮.zip （8个子文件）

html5圆形进度条加载按钮

jiaoben2243

css

demo.css 4KB

normalize.css 2KB

component.css 3KB

index.html 4KB

modernizr.custom.js 8KB

classie.js 2KB

uiProgressButton.js 5KB

html5圆形进度条加载按钮.jpg 34KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>html5圆形进度条加载按钮 - 网页模板</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" />  <link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="js/modernizr.custom.js"></script> </head> <body> <section> <h2>默认效果 (成功, 错误)</h2> <div class="box">  <div class="progress-button"> <button><span>Submit</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>  <div class="progress-button"> <button><span>Submit</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> </div> <h2>弹性效果(成功, 错误)</h2> <div class="box">  <div class="progress-button elastic"> <button><span>Submit</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>  <div class="progress-button elastic"> <button><span>Submit</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> </div> </section> <script type="text/javascript" src="js/classie.js"></script> <script type="text/javascript" src="js/uiProgressButton.js"></script> <script type="text/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 ); } } ); } ); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉