新闻资讯

有各种动画可以应用到您的网页。动画的文字，模态对话框，过渡和进度指示器。对于进度的指标，通常在酒吧的形式，你在酒吧看到进度表示多少已经取得了进展（或加载）。然而，如果你有兴趣的里面一个按钮的进步，尝试LADDA。

LADDA是一个jQuery插件所作哈基姆萨尔瓦多哈塔布给你里面的按钮负载效应。这是一个UI的概念，有效地分离作用和反馈之间的差距。用户将被给予在装载指示器的形式的反馈，而不必离开页面。还有一个版本为WordPress LADDA可用。

基本用法
LADDA可以作为一个独立的插件，它不需要任何其他的依赖关系。要开始，首先你必须同时包含ladda.min.js和spin.min.js文件，你可以从GitHub的网页在你的项目中，像这样。

1. <font><font><script src="js/spin.min.js"> </ SCRIPT> </font></font><font></font><font><font>  
2. <script src="js/ladda.min.js"> </ SCRIPT></font></font><font></font>  

为了使按钮应用默认LADDA主题，加载的CSS文件ladda.min.css。如果你想只无主题的功能按钮，加载LADDA-themeless.min.css文件。

1. <font><font><link rel="stylesheet" href="dist/ladda.min.css">  
2. </font></font>  

HTML标记
为了使LADDA工作，你必须包括LADDA按钮类到按钮。下面是一个例子：

1. <font><font><button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xl">提交</按钮>  
2. </font></font>  

LADDA还为您提供了使用数据属性的按钮样式的HTML中的选项。正如你可以看到上面的按钮使用数据式的动画风格。要应用不同的样式，你可以检查的完整列表在演示页。

要改变颜色，你可以使用数据的颜色。对于按钮的大小，包括数据大小的按钮。

与服务器合并
而现在，为了使加载动画提交到服务器（动画之后，将刷新页面），我们将需要的bind（）方法。这将绑定进步按钮和模拟加载进度：

1. <script>  
2. Ladda.bind( 'button', {  
3.    callback: function( instance ) {  
4.       var progress = 0;  
5.       var interval = setInterval( function() {  
6.          progress = Math.min( progress + Math.random() * 0.1, 1 );  
7.          instance.setProgress( progress );  
8.    
9.          if( progress === 1 ) {  
10.             instance.stop();  
11.             clearInterval( interval );  
12.          }  
13.       }, 200 );  
14.    }  
15. });  
16. </script>  

你也可以使用JavaScript API，用下面的方法来控制你的按钮：

1. <script>  
2.  
3.    var l = Ladda.create( document.querySelector( 'button' ) );  
4.  
5.    l.start();  
6.    l.stop();  
7.    l.toggle();  
8.    l.isLoading();  
9.    l.setProgress( 0-1 );  
10. </script>  

结论
随着引导的支持和积极响应，以及，LADDA值得在你的项目中一试。此外，它已经过测试，它运作良好，在Chrome浏览器，火狐，Safari以及IE9和上面的最新版本。随时让我们知道您的想法在评论框下面。