技術標籤：bootstrapbootstrap

新增bootstrap.css樣式,spin.min.js和ladda.min.js到頁面

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="dist/spin.min.js"></script>
<script src="dist/ladda.min.js"></script
 
>

新增一個按鈕並加入樣式:

<button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>

或者使用“a”標籤:

<a href="#" class="btn btn-primary ladda-button" data-style="expand-left
 
"><span class="ladda-label">expand-left</span></a>

使用jQuery來控制該js按鈕特效:

// Create a new instance of ladda for the specified button
var l = $( '.my-button' ).ladda();
 
// Start loading
l.ladda( 'start' );
 
// Will display a progress bar for 50% of the button width
l.ladda
 
( 'setProgress', 0.5 );
 
// Stop loading
l.ladda( 'stop' );
 
// Toggle between loading/not loading states
l.ladda( 'toggle' );
 
// Check the current state
l.ladda( 'isLoading' );     

參考文章：[1] https://www.jq22.com/jquery-info502
[2] http://www.htmleaf.com/jQuery/Buttons-Icons/201503101494.html