|
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Ladda Examples - different size buttons</title> |
|
<link rel="stylesheet" href="dist/ladda.min.css"> |
|
<!-- demo stylesheet for this page only --> |
|
<link rel="stylesheet" href="css/demo.css"> |
|
</head> |
|
<body> |
|
<article class="examples"> |
|
<div class="intro"> |
|
<h1>Ladda Examples - different size buttons</h1> |
|
<p>Click on any of the buttons below</p> |
|
</div> |
|
|
|
<section class="progress-demo"> |
|
<h3>Extra Small</h3> |
|
<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xs"><span class="ladda-label">Submit</span></button> |
|
</section> |
|
|
|
<section class="progress-demo"> |
|
<h3>Small</h3> |
|
<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="s"><span class="ladda-label">Submit</span></button> |
|
</section> |
|
|
|
<section class="progress-demo"> |
|
<h3>Large</h3> |
|
<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="l"><span class="ladda-label">Submit</span></button> |
|
</section> |
|
|
|
<section class="progress-demo"> |
|
<h3>Extra Large</h3> |
|
<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xl"><span class="ladda-label">Submit</span></button> |
|
</section> |
|
|
|
|
|
</article> |
|
<script src="dist/spin.min.js"></script> |
|
<script src="dist/ladda.min.js"></script> |
|
|
|
<script> |
|
// Bind normal buttons |
|
Ladda.bind( 'section:not(.progress-demo) button', { timeout: 2000 } ); |
|
|
|
// Bind progress buttons and simulate loading progress |
|
Ladda.bind( 'section.progress-demo 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 ); |
|
} |
|
} ); |
|
|
|
// You can control loading explicitly using the JavaScript API |
|
// as outlined below: |
|
|
|
// var l = Ladda.create( document.querySelector( 'button' ) ); |
|
// l.start(); |
|
// l.stop(); |
|
// l.toggle(); |
|
// l.isLoading(); |
|
// l.setProgress( 0-1 ); |
|
|
|
</script> |
|
</body> |
|
</html> |
