使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验

在线演示

在线演示

你们在开发基于web的网站或者web应用中，经常在AJAX调用的过程当中须要提示用户而且展现相关的“加载中”效果，相似的UI设计也很是多，好比，当点击一个按钮后，在它的旁边显示一个 “加载中” 文字，或者是添加一个“旋转GIF”动画效果图。

在今天这个教程中，咱们将介绍来一个Ladda UI概念设计，帮助你设计不一样的基于按钮的加载中效果，而且整合到Bootstrap3框架里，以下：

它能够方便的帮助你经过按钮来提示用户相关的“加载中”状态，而且支持不一样的加载效果，配置也很简单，只须要在对应的按钮上添加data-style属性，以下：

data-style="slide-down"

在接下来的教程中，咱们将介绍如何将Ladda UI设计和Bootstrap3整合起来，提供一个完整的“加载中”效果体验。

相关类库

首先导入相关Bootstrap和Ladda类库：

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script type="text/javascript" src="js/jquery.jribbble.min.js"></script><script src="js/bootstrap.min.js"></script>	<script src="js/spin.js"></script>	<script src="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中定义使用的加载中效果，以下：

<button type="button" class="btn btn-info btn-lg ladda-button center-block" id="showmore" title="显示更多前端代码回放" data-style="slide-down">				<span class="ladda-label">					更多设计				</span>			</button>

这里咱们定义使用

data-style="slide-down"

来设置须要的加载中效果，这个效果是设置一个向下幻灯的切换效果，更多的效果，请访问：http://lab.hakim.se/ladda/

相关的CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />		<link rel="stylesheet" type="text/css" href="css/ladda-themeless.css" />		<link rel="stylesheet" type="text/css" href="css/gbtags.css" />

这里咱们引用了相关的CSS，以保证Ladda能够正常的和Bootstrap3一块儿正常工做。

完整代码

若是你曾阅读过相关教程：Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶（底）弹跳效果 ，那么如下代码应该很是容易理解：

$(document).ready(function(){			  //定义相关变量			  var $wallcontent = $('#wallcontent'), pagenum=1,  $showmore = $('#showmore');			  			  function loadshots() {				var l = Ladda.create(this);				l.start();				l.setProgress( 0.1 );								$showmore.find('.ladda-label').text('loading...');								//调用jdribbble相关API获取远程数据内容				$.jribbble.getShotsByList('popular', function(data){								  var items = [];				  				  $.each(data.shots, function(i, shot){					items.push('<article class="col-md-2 col-sm-3 col-xs-4">');					items.push('<a href="' + shot.url + '" target="_blank" class="linkc">');					items.push('<img class="img-responsive" src="' + shot.image_teaser_url + '" alt="' + shot.title + '">');					items.push('</a>');					items.push('</article>');					l.setProgress(0.1 + 0.02*i);				  });				  				  var newEls = items.join(''), tmpcontent = $(newEls);				  				  l.setProgress( 0.9 );				  //以上代码生成了须要显示的dirbbble设计内容，下面代码中咱们将这些内容添加到HTML容器中				  $wallcontent.append(tmpcontent);				  				  $showmore.find('.ladda-label').text('更多设计');				  				  l.setProgress( 1 );				  l.stop();								}, {page:pagenum, per_page:24});								pagenum++;			  }			  			  //绑定方法到加载更多按钮			  $showmore.bind('click', loadshots);			  			  $showmore.trigger('click');			  			});

以上代码，主要经过点击“更多设计”来获取最受欢迎的dribbble设计做品，这里咱们经过绑定click方法来处理事件，而且在处理过程当中，使用进度条来指示当前的加载进度。

在附带的四个在线演示中，咱们调用了不一样的“加载中"特效，你们能够运行查看效果。

若是对于代码有任何问题，请在这里给我留言，我会给您解答，感谢阅读！

了解代码是如何一行一行编写出来的，请访问以下地址查看：

前端代码回放：http://www.gbtags.com/gb/rtreplayerpreview/9.htm

阅读全文：使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验