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

欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验】，下面是详细的分享！

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

　　

 

　　在线演示

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

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

　　

 

　　它可以方便的帮助你通过按钮来提示用户相关的“加载中”状态，并且支持不同的加载效果，配置也很简单，只需要在对应的按钮上添加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/

　　相关的CSS

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

以上所分享的是关于使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：有了bootstrap，为什么还要做amaze ui

　　答：1、Bootstrap介绍 Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstr... >>详细

　　相关问题：Angular-UI 选Bootstrap 3需要大改动吗

　　答：UI-Bootstarp使用modal时候会有问题，需要改模板。真心不知道angularjs有没有什么好办法实现弹出对话框。 建议不要完全依赖angular-ui。比如从0.10.0更新到0.11的时候很多东西都不能用必须更新所有代码，比如dayepicker，pagination。当然这些都... >>详细

　　相关问题：写网页用原生 html5 和 bootstrap 哪种用户体验好

　　答：根据优势选着你觉得合适自己的： bootstrap：优势与劣势 bootstrap 2以后的版本不支持IE6。当你的网站需要支持ie6的时候，这时是缺点。当网站不需要支持ie6.减少了兼容代码的处理，马上又变成了优点。 总体而已，Bootstrap 属于前端 ui 库，通过... >>详细