README

带有内置加载指示器的按钮，有效地在动作和反馈之间架起桥梁。

说明

发布下载和变更历史记录在此处提供 https://github.com/hakimel/Ladda/releases。

您应该使用的项目的编译文件位于 /dist 目录中。您需要包含 ladda.min.js 和 spin.min.js 文件，以及两个样式表中的一个。如果您想使用Ladda 示例页面中使用的按钮样式，请使用 ladda.min.css 文件；如果您想使用不带视觉样式（颜色、填充等）的功能按钮，请使用 ladda-themeless.min.css 文件。

HTML

Ladda 按钮必须赋予 ladda-button 类，按钮标签需要具有 ladda-label 类。如果 DOM 中不存在 ladda-label，它将被自动创建。以下是一个使用扩展右动画样式的按钮示例。

<button class="ladda-button" data-style="expand-right"><span class="ladda-label">Submit</span></button>

按钮接受三个属性

data-style：按钮样式之一，完整列表在演示中 [必需]
data-color：绿色/红色/蓝色/紫色/薄荷绿
data-size：xs/s/m/l/xl，默认为中等
data-spinner-size：40，旋转器的像素尺寸，默认为基于按钮高度的动态尺寸
data-spinner-color：十六进制代码或任何命名 CSS 颜色。

JavaScript

如果您将为提交到服务器的表单使用加载动画（总是导致页面刷新），您可以使用 bind() 方法

// Automatically trigger the loading animation on click
Ladda.bind( 'input[type=submit]' );

// Same as the above but automatically stops after two seconds
Ladda.bind( 'input[type=submit]', { timeout: 2000 } );

如果您想对按钮使用 JavaScript 控制，可以使用以下方法

// Create a new instance of ladda for the specified button
var l = Ladda.create( document.querySelector( '.my-button' ) );

// Start loading
l.start();

// Will display a progress bar for 50% of the button width
l.setProgress( 0.5 );

// Stop loading
l.stop();

// Toggle between loading/not loading states
l.toggle();

// Check the current state
l.isLoading();

可以使用以下方法停止页面上的所有加载动画

Ladda.stopAll();

模块

可以使用 Common.js 或 AMD 将旋转器和 Ladda 作为模块加载。

// Using Require.js
define(['ladda'], function(Ladda) {
	// Make Buttons Here
});

浏览器支持

该项目已在 Chrome 和 Firefox 中进行测试。它应该在 Chrome、Firefox、Safari 以及 IE9 及以上版本的当前稳定版本中工作。

变更日志

https://github.com/hakimel/Ladda/releases

许可协议

MIT 许可

uvicate / ladda

维护者

详细信息