ladda_使用LADDA在按钮中创建内置加载效果

您可以将各种动画应用到网页中。 文本 ， 模态框 ， 过渡和进度指示器的 动画 。 对于进度指示器，通常以条形形式显示，您在条形上看到的进度指示已完成（或加载）了多少进度。 但是，如果您对按钮内的进度感兴趣 ，请尝试使用Ladda 。

Ladda是Hakim El Hattab制作的jQuery插件，可为您提供按钮内的加载效果 。 这是一个UI概念 ，可以有效地分隔行动与反馈之间的鸿沟。 将以加载指示器的形式向用户提供反馈，而不必离开页面。 还有适用于WordPress的Ladda版本。

基本用法

Ladda可以用作不需要任何其他依赖项的独立插件。 首先，您必须同时包括从项目中的GitHub页面获取的ladda.min.js和spin.min.js文件。

<script src="js/spin.min.js"></script> 
<script src="js/ladda.min.js"></script>

要使按钮应用默认的Ladda主题，请加载ladda.min.cssCSS文件。 如果只需要功能按钮而不使用主题，请加载ladda-themeless.min.css文件。

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

HTML标记

为了使Ladda正常工作，您必须在ladda-button包含ladda-button类。 这是一个例子：

<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xl">Submit</button>

Ladda还使用按钮样式的数据属性在HTML中为您提供了选项。 如上所示，该按钮将data-style用作动画样式。 要应用其他样式，您可以在演示页面中查看完整列表。

要更改颜色，可以使用data-color 。 对于按钮大小，请在按钮中包含data-size 。

与服务器合并

现在，要使加载的动画提交到服务器（动画之后将重新加载页面），我们将需要bind()方法。 这将绑定进度按钮并模拟加载进度：

<script>
Ladda.bind( 'button', {
   callback: function( instance ) {
      var progress = 0;
      var interval = setInterval( function() {
         progress = Math.min( progress + Math.random() * 0.1, 1 );
         instance.setProgress( progress );
 
         if( progress === 1 ) {
            instance.stop();
            clearInterval( interval );
         }
      }, 200 );
   }
});
</script>

您还可以使用Javascript API通过以下方法来控制按钮：

<script>
   var l = Ladda.create( document.querySelector( 'button' ) );
   l.start();
   l.stop();
   l.toggle();
   l.isLoading();
   l.setProgress( 0-1 );
</script>

结论

在Bootstrap的支持和响应能力的帮助下，Ladda在您的项目中值得一试。 此外，它已经过测试，并且可以在最新版本的Chrome，Firefox，Safari和IE9及更高版本中正常运行。 请随时在下面的评论框中告诉我们您的想法 。

翻译自: https://www.hongkiat.com/blog/loading-effect-in-buttons-ladda/