在線演示

大家在開發基于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"> <scripttype="text/javascript"src="js/jquery.jribbble.min.js"> <scriptsrc="js/bootstrap.min.js"> <scriptsrc="js/spin.js"> <scriptsrc="js/ladda.js">

這里我們同時導入了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">

這里我們定義使用

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一起正常工作。