使用Bootstrap3和Ladda UI實現的多種按鈕“加載中”效果體驗
大家在開發基于web的網站或者web應用中，常常在AJAX調用的過程中需要提示用戶并且展示相關的“加載中”效果，類似的UI設計也非常多，比如，當點擊一個按鈕后，在它的旁邊顯示一個 “加載中” 文字，或者是添加一個“旋轉GIF”動畫效果圖。
在今天這個教程中，我們將介紹來一個Ladda UI概念設計，幫助你設計不同的基于按鈕的加載中效果，并且整合到Bootstrap3框架里，如下：
它可以方便的幫助你通過按鈕來提示用戶相關的“加載中”狀態，并且支持不同的加載效果，配置也很簡單，只需要在對應的按鈕上添加data-style屬性，如下：
- data-style="slide-down"
在接下來的教程中，我們將介紹如何將Ladda UI設計和Bootstrap3整合起來，提供一個完整的“加載中”效果體驗。
相關類庫
首先導入相關Bootstrap和Ladda類庫：
- <scripttype="text/javascript"src="js/jquery-1.7.1.min.js"></script>
- <scripttype="text/javascript"src="js/jquery.jribbble.min.js"></script>
- <scriptsrc="js/bootstrap.min.js"></script>
- <scriptsrc="js/spin.js"></script>
- <scriptsrc="js/ladda.js"></script>
這里我們同時導入了Jdribbble插件來實現AJAX相關的效果（當然，作為數據提供，你可以使用任何其它服務，或者自己的AJAX），獲取來自dribbble.com的最佳設計圖片。
如果你不需要展示進度效果的話，基本上只需要在AJAX相關請求中添加如下代碼即可完成javascript代碼開發：
- var l =Ladda.create(this);
- l.start();
當AJAX請求完成后，可以調用如下停止：
- l.stop();
即完整了整個“加載中”的過程，其中包含了“disabled”當前的按鈕的操作，非常方便，提高了開發的效率。
當然，如果你需要提示用戶當前進度的話，它內置了一個進度條，你可以使用如下代碼來設置當前進度：
- l.setProgress(0.1);
Javacript書寫完畢了，你需要在HTML中定義使用的加載中效果，如下：
- <buttontype="button"class="btn btn-info btn-lg ladda-button center-block"id="showmore"title="顯示更多前端代碼回放"data-style="slide-down">
- <spanclass="ladda-label">
- 更多設計
- </span>
- </button>
這里我們定義使用
- data-style="slide-down"
來設置需要的加載中效果，這個效果是設置一個向下幻燈的切換效果，更多的效果，請訪問：http://lab.hakim.se/ladda/
相關的CSS
- <linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"/>
- <linkrel="stylesheet"type="text/css"href="css/ladda-themeless.css"/>
- <linkrel="stylesheet"type="text/css"href="css/gbtags.css"/>
這里我們引用了相關的CSS，以保證Ladda可以正常的和Bootstrap3一起正常工作。
完整代碼
如果你曾閱讀過相關教程：Bootstrap3和jQuery實現響應式iOS/Android風格滾動到頁頂（底）彈跳效果 。
閱讀全文：使用Bootstrap3和Ladda UI實現的多種按鈕“加載中”效果體驗