2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. <meta name="viewport" content="width=device-width, initial-scale=1">
    8. <title>html5圆形进度条加载按钮 - 站长素材</title>
    10. <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    11. <link rel="stylesheet" type="text/css" href="css/demo.css" />
    13. <!--必要样式-->
    14. <link rel="stylesheet" type="text/css" href="css/component.css" />
    16. <script src="js/modernizr.custom.js"></script>
    18. </head>
    19. <body>
    21. <section>
    23.        <h2>默认效果 (成功, 错误)</h2>
    24.        <div class="box">
    25.                <!-- progress button -->
    26.                <div class="progress-button">
    27.                        <button><span>Submit</span></button>
    28.                        <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>
    29.                        <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>
    30.                        <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>
    31.                </div><!-- /progress-button -->
    32.                <!-- progress button -->
    33.                <div class="progress-button">
    34.                        <button><span>Submit</span></button>
    35.                        <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>
    36.                        <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>
    37.                        <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>
    38.                </div><!-- /progress-button -->
    39.        </div>
    41.        <h2>弹性效果(成功, 错误)</h2>
    42.        <div class="box">
    43.                <!-- progress button -->
    44.                <div class="progress-button elastic">
    45.                        <button><span>Submit</span></button>
    46.                        <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>
    47.                        <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>
    48.                        <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>
    49.                </div><!-- /progress-button -->
    50.                <!-- progress button -->
    51.                <div class="progress-button elastic">
    52.                        <button><span>Submit</span></button>
    53.                        <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>
    54.                        <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>
    55.                        <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>
    56.                </div><!-- /progress-button -->
    57.        </div>
    59. </section>
    61. <script type="text/javascript" src="js/classie.js"></script>
    62. <script type="text/javascript" src="js/uiProgressButton.js"></script>
    63. <script type="text/javascript">
    64. [].slice.call( document.querySelectorAll( '.progress-button' ) ).forEach( function( bttn, pos ) {
    65.        new UIProgressButton( bttn, {
    66.                callback : function( instance ) {
    67.                        var progress = 0,
    68.                                interval = setInterval( function() {
    69.                                        progress = Math.min( progress + Math.random() * 0.1, 1 );
    70.                                        instance.setProgress( progress );
    72.                                        if( progress === 1 ) {
    73.                                                instance.stop( pos === 1 || pos === 3 ? -1 : 1 );
    74.                                                clearInterval( interval );
    75.                                        }
    76.                                }, 150 );
    77.                }
    78.        } );
    79. } );
    80. </script>
    81. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    82. <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
    83. <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
    84. </div>
    85. </body>
    86. </html>