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

最新推荐文章于 2024-08-31 07:58:23 发布

cune1359

最新推荐文章于 2024-08-31 07:58:23 发布

阅读量899

点赞数

文章标签： java html js css vue ViewUI

Ladda是一款由HakimElHattab创建的jQuery插件，可在按钮中实现加载效果，有效缩短操作与反馈的时间差，提供用户友好的加载指示，无需离开页面。适用于多种浏览器，包括Chrome、Firefox、Safari和IE9及以上版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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