内置loading指示器提交按钮特效

这是一款基于 Bootstrap 3 的内置 loading 指示器的提交按钮特效。该提交按钮可以选择 13 种 loading 指示器效果，在点击提交后以不同方式来显示 loading 指示器动画。

使用方法：

使用该提交按钮 loading 动画特效要引入 ladda-themeless.min.css，spin.min.js 和 ladda.min.js 文件。

也想出现在这里？联系我们吧

HTML 结构：

你需要给按钮添加 class ladda-button，并且在中添加一个带 class 为 ladda-label 的元素。如果你没有手动添加 ladda-label 元素，它会被插件自动创建。

1. <button class="ladda-button" data-style="expand-right">

2.   <span class="ladda-label">Submit</span>

3. </button>

你也可以使用一个标签来制作提交按钮：

expand-left

在

中可以使用下面的 data-*属性：

data-style：按钮的样式，所有可用的样式如下：

data-style="expand-left"

data-style="expand-right"

data-style="expand-up"

data-style="expand-down"

data-style="zoom-in"

data-style="zoom-out"

data-style="slide-left"

data-style="slide-right"

data-style="slide-up"

data-style="slide-down"

data-style="contract"

data-color：可用的颜色有：green/red/blue/purple/mint。

data-size：按钮的尺寸，xs/s/l/xl。

data-spinner-size：指示器的尺寸，40 像素，默认会根据按钮尺寸动态调整尺寸。

data-spinner-color：十六进制颜色值或合法的颜色名称。

JAVASCRIPT 代码：

如果你需要在向服务器提交表单的时候制作 loading 动画效果，可以使用 bind()方法：

1. // Automatically trigger the loading animation on click

2. Ladda.bind( 'input[type=submit]' );

4. // Same as the above but automatically stops after two seconds

5. Ladda.bind( 'input[type=submit]', { timeout: 2000 } );

如果需要使用 JavaScript 来控制按钮动画，可以使用下面的方法：

1. // Create a new instance of ladda for the specified button

2. var l = Ladda.create( document.querySelector( '.my-button' ) );

4. // Start loading

5. l.start();

7. // Will display a progress bar for 50% of the button width

8. l.setProgress( 0.5 );

10. // Stop loading

11. l.stop();

13. // Toggle between loading/not loading states

14. l.toggle();

16. // Check the current state

17. l.isLoading();

使用下面的方法来停止页面中的所有 loading 动画。

1. Ladda.stopAll();

内置 loading 指示器提交按钮特效

已有 381 人购买

• 永久更新：
• 演示数据：

此资源下载价格为1元立即购买（VIP 免费）立即升级

查看演示升级 VIP立刻购买

演示地址

下载地址

咨询客服 中文演示

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！