JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<link rel="stylesheet" href="http://imapo.ru/css/ladda.min.css">
<script src="http://imapo.ru/js/spin.min.js"></script>
<script src="http://imapo.ru/js/ladda.min.js"></script>
<section class="button-demo">
    <button class="ladda-button" data-color="green" data-style="expand-left">Submit</button>
</section>
<br>
<section class="progress-demo">
    <button class="ladda-button" data-color="purple" data-style="expand-right">Submit</button>
</section>
<br>
<section class="progress-demo">
    <button class="ladda-button" data-color="purple" data-style="contract">Submit</button>
</section>

JavaScript

// Bind normal buttons
Ladda.bind('.button-demo button', {
    timeout: 2000
});

// Bind progress buttons and simulate loading progress
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);
    }
});

// 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 );