带loading指示器的js按钮动画特效

3 篇文章 0 订阅
本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/jQuery/Buttons-Icons/201503101494.html


简要教程

Ladda是一款内置Loading指示器和进度条的提交js按钮特效插件。该js按钮特效用于制作提交按钮,在点击按钮后,按钮上会出现无限循环的Loading指示器和加载进度条效果。这种设计大大增强了用户的体验性。

你可以使用bower install laddanpm install ladda来安装该js按钮插件。指示器和Ladda可以通过AMD作为一个module来调用:

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

或在Common.js中,你可以:

var ladda = require( 'Ladda/dist/ladda.min' );               

 使用方法

该js按钮特效在使用时要引入ladda.min.jsspin.min.js文件,如果你想要和DEMO中一样的按钮样式,可以使用ladda.min.css样式文件,如果你只是需要按钮的功能而不需要样式,可以使用ladda-themeless.min.css文件。

 HTML结构

Ladda js按钮特效必须在按钮上使用class ladda-button,按钮的标签使用ladda-label作为class。如果在DOM中不存在,ladda-label会自动创建。下面的代码是向右扩展的进度条动画的按钮代码:

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

按钮接收3个参数:

  • data-style:按钮的某个样式,所有的样式前查看DEMO。
  • data-color:green/red/blue/purple/mint。
  • data-size: xs/s/l/xl,默认值是中等大小。
  • data-spinner-size: 直径40像素,默认会依据按钮的尺寸动态调整。
  • data-spinner-color: hex颜色代码或css 颜色名称
 JAVASCRIPT

如果你是在一个表单中使用该js按钮来向服务器提交信息,你可以使用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来控制该js按钮特效,可以使用下面的方法:

// 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();
 
// Delete the button's ladda instance
l.remove();               

页面上所用的loading加载动画可以通过下面的方法来停止:

Ladda.stopAll();               
 与jQuery结合使用

该js按钮特效可以和jQuery完美结合,如果你是在一个表单中使用该js按钮来向服务器提交信息,你可以使用ladda('bind')方法来提交信息:

// Automatically trigger the loading animation on click
$( 'input[type=submit]' ).ladda( 'bind' );
 
// Same as the above but automatically stops after two seconds
$( 'input[type=submit]' ).ladda( 'bind' , { timeout: 2000 } );               

如果你想使用jQuery来控制该js按钮特效,可以使用下面的方法:

// Create a new instance of ladda for the specified button
var l = $( '.my-button' ).ladda();
 
// Start loading
l.ladda( 'start' );
 
// Will display a progress bar for 50% of the button width
l.ladda( 'setProgress' , 0.5 );
 
// Stop loading
l.ladda( 'stop' );
 
// Toggle between loading/not loading states
l.ladda( 'toggle' );
 
// Check the current state
l.ladda( 'isLoading' );               

页面上所用的loading加载动画可以通过下面的方法来停止:

$.ladda( 'stopAll' );          

 浏览器兼容

该js按钮特效插件在Chrome和Firefox上进行了测试。它可以很好的工作在当前最新版本的Chrome, Firefox, Safari和IE9+浏览器上。

效果: http://www.htmleaf.com/Demo/201503101495.html




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值