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

- 日理万妓 2022-08-26 01:16 106阅读 0赞

[![4cf85a12-82c3-4dac-adaa-d5767eac7d76.jpg][]][4cf85a12-82c3-4dac-adaa-d5767eac7d76.jpg 1]

[在线演示][Link 1]

[在线演示][Link 2]

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

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

[![7ae1aab3-e9fd-4629-bd8e-7a0023b579f1.jpg][]][7ae1aab3-e9fd-4629-bd8e-7a0023b579f1.jpg 1]

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

data-style="slide-down"

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

## 相关类库 ##

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

这里我们同时导入了Jdribbble插件来实现AJAX相关的效果（当然，作为数据提供，你可以使用任何其它服务，或者自己的AJAX），获取来自dribbble.com的最佳设计图片。

如果你不需要展示进度效果的话，基本上只需要在AJAX相关请求中添加如下代码即可完成javascript代码开发：

var l = Ladda.create(this); l.start();

当AJAX请求完成后，可以调用如下停止：

l.stop();

即完整了整个“加载中”的过程，其中包含了“disabled”当前的按钮的操作，非常方便，提高了开发的效率。

当然，如果你需要提示用户当前进度的话，它内置了一个进度条，你可以使用如下代码来设置当前进度：

l.setProgress( 0.1 );

Javacript书写完毕了，你需要在HTML中定义使用的加载中效果，如下：

这里我们定义使用

data-style="slide-down"

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

## 相关的CSS ##

这里我们引用了相关的CSS，以保证Ladda可以正常的和Bootstrap3一起正常工作。

## 完整代码 ##

如果你曾阅读过相关教程：[Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶（底）弹跳效果][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方法来处理事件，并且在处理过程中，使用进度条来指示当前的加载进度。  [![9d9614ff-6951-43f4-9285-3a5299c36ba6.jpg][]][9d9614ff-6951-43f4-9285-3a5299c36ba6.jpg 1] ##

在附带的四个[在线演示][Link 1]中，我们调用了不同的“加载中"特效，大家可以运行查看效果。

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

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

> 前端代码回放：[http://www.gbtags.com/gb/rtreplayerpreview/9.htm][http_www.gbtags.com_gb_rtreplayerpreview_9.htm]

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

[4cf85a12-82c3-4dac-adaa-d5767eac7d76.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/4cf85a12-82c3-4dac-adaa-d5767eac7d76.jpg
[4cf85a12-82c3-4dac-adaa-d5767eac7d76.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/4cf85a12-82c3-4dac-adaa-d5767eac7d76.jpg
[Link 1]: http://www.gbtags.com/gb/demoviewer/2909/44b0c6e7-0395-4825-bff4-5914e6153ee0/index.html.htm
[Link 2]: http://www.gbtags.com/gb/demoviewer/2909/44b0c6e7-0395-4825-bff4-5914e6153ee0/index2.html.htm
[Bootstrap3]: http://www.gbtags.com/gb/tag/1091.htm
[7ae1aab3-e9fd-4629-bd8e-7a0023b579f1.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/7ae1aab3-e9fd-4629-bd8e-7a0023b579f1.jpg
[7ae1aab3-e9fd-4629-bd8e-7a0023b579f1.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/7ae1aab3-e9fd-4629-bd8e-7a0023b579f1.jpg
[http_lab.hakim.se_ladda]: http://lab.hakim.se/ladda/
[Bootstrap3_jQuery_iOS_Android]: http://www.gbtags.com/gb/share/2276.htm
[9d9614ff-6951-43f4-9285-3a5299c36ba6.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/9d9614ff-6951-43f4-9285-3a5299c36ba6.jpg
[9d9614ff-6951-43f4-9285-3a5299c36ba6.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/9d9614ff-6951-43f4-9285-3a5299c36ba6.jpg
[http_www.gbtags.com_gb_rtreplayerpreview_9.htm]: http://www.gbtags.com/gb/rtreplayerpreview/9.htm
[Bootstrap3_Ladda UI_]: http://www.gbtags.com/gb/share/2909.htm