【jQuery】ロードインジケータが内蔵されたボタンLadda

jQuery

Ladda

March 11, 2017

Laddaはロードインジケータが内蔵されたボタン。

HTML

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

ボタンの属性

  1. data-style
  2. data-color
  3. data-size
  4. data-spinner-size
  5. data-spinner-color
  6. data-spinner-lines

JavaScript

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

// Same as the above but automatically stops after two seconds
Ladda.bind( 'button[type=submit]', { timeout: 2000 } );
// 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();
Ladda.stopAll();

With jQuery

// Automatically trigger the loading animation on click
$( 'button[type=submit]' ).ladda( 'bind' );

// Same as the above but automatically stops after two seconds
$( 'button[type=submit]' ).ladda( 'bind', { timeout: 2000 } );
// 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' );
$.ladda( 'stopAll' );

Module

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

MIT

Latest Posts

Related Posts