console
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ladda</title>
<meta name="description" content="">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="https://cdn.bootcdn.net/ajax/libs/Ladda/1.0.6/ladda.min.css" rel="stylesheet">
</head>
<body>
<article class="examples">
<section class="button-demo">
<h3>expand-left</h3>
<button class="ladda-button" data-color="green" data-style="expand-left">Submit</button>
</section>
<section class="button-demo">
<h3>expand-right</h3>
<button class="ladda-button" data-color="green" data-style="expand-right">Submit</button>
</section>
<section class="button-demo">
<h3>expand-up</h3>
<button class="ladda-button" data-color="green" data-style="expand-up">Submit</button>
</section>
<section class="button-demo">
<h3>expand-down</h3>
<button class="ladda-button" data-color="green" data-style="expand-down">Submit</button>
</section>
<section class="button-demo">
<h3>contract</h3>
<button class="ladda-button" data-color="red" data-style="contract">Submit</button>
</section>
<section class="button-demo">
<h3>contract-overlay</h3>
<button class="ladda-button" data-color="red" data-style="contract-overlay" style="z-index: 10;">Submit</button>
</section>
<section class="button-demo">
<h3>zoom-in</h3>
<button class="ladda-button" data-color="red" data-style="zoom-in">Submit</button>
</section>
<section class="button-demo">
<h3>zoom-out</h3>
<button class="ladda-button" data-color="red" data-style="zoom-out">Submit</button>
</section>
<section class="button-demo">
<h3>slide-left</h3>
<button class="ladda-button" data-color="blue" data-style="slide-left">Submit</button>
</section>
<section class="button-demo">
<h3>slide-right</h3>
<button class="ladda-button" data-color="blue" data-style="slide-right">Submit</button>
</section>
<section class="button-demo">
<h3>slide-up</h3>
<button class="ladda-button" data-color="blue" data-style="slide-up">Submit</button>
</section>
<section class="button-demo">
<h3>slide-down</h3>
<button class="ladda-button" data-color="blue" data-style="slide-down">Submit</button>
</section>
<h3 id="progress">Built-in progress bar</h3>
<section class="progress-demo">
<h3>expand-right</h3>
<button class="ladda-button" data-color="purple" data-style="expand-right">Submit</button>
</section>
<section class="progress-demo">
<h3>contract</h3>
<button class="ladda-button" data-color="purple" data-style="contract">Submit</button>
</section>
<h3 id="sizes">Sizes</h3>
<section class="progress-demo">
<h3>Extra Small</h3>
<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xs">Submit</button>
</section>
<section class="progress-demo">
<h3>Small</h3>
<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="s">Submit</button>
</section>
<section class="progress-demo">
<h3>Large</h3>
<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="l">Submit</button>
</section>
<section class="progress-demo">
<h3>Extra Large</h3>
<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xl">Submit</button>
</section>
</article>
<script src="https://cdn.bootcdn.net/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Ladda/1.0.6/ladda.min.js"></script>
<script>
Ladda.bind( '.button-demo button', { timeout: 2000 } );
Ladda.bind( '.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 );
}
} );
</script>
</body>
</html>
body {
background: #000;
font-family: monospace;
font-size: 14px;
color: #333333;
}
button {
outline: 0;
}
.examples {
max-width: 670px;
margin: 2em auto;
padding: 4em;
background: #000;
text-align: center
}
.examples .intro {
margin-bottom: 3em;
line-height: 1.4em;
font-size: 16px;
text-align: left;
}
.examples .intro h1 {
margin-top: 0;
font-size: 18px;
}
.examples .outro {
display: block;
text-align: right;
margin-top: 3em;
}
.examples section {
display: inline-block;
width: 24%;
min-width: 160px;
margin-bottom: 2em;
text-align: center;
vertical-align: top;
}
.examples section h3 {
color: #bbb;
font-weight: normal;
}
.sharing {
float: left;
}