JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://imapo.ru/css/component.css">
<script src="http://imapo.ru/js/classie.js"></script>
<script src="http://imapo.ru/js/modernizr.custom.js"></script>
<script src="http://imapo.ru/js/progressButton.js"></script>
<script src="http://imapo.ru/js/progressButton.js"></script>
<div class="wrapper">
<section>
<h2>fill horizontal</h2>
<button class="progress-button" data-style="fill" data-horizontal>Отправить</button>
</section>
<section>
<h2>fill vertical</h2>
<button class="progress-button" data-style="fill" data-vertical>Отправить</button>
</section>
<section>
<h2>shrink horizontal</h2>
<button class="progress-button" data-style="shrink" data-horizontal>Отправить</button>
</section>
<section>
<h2>shrink vertical</h2>
<button class="progress-button" data-style="shrink" data-vertical>Отправить</button>
</section>
</div>
<div class="wrapper">
<section>
<h2>rotate-angle-bottom <br/>perspective</h2>
<button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>Отправить</button>
</section>
<section>
<h2>rotate-angle-top <br/>perspective</h2>
<button class="progress-button" data-style="rotate-angle-top" data-perspective data-horizontal>Отправить</button>
</section>
<section>
<h2>rotate-angle-left <br/>perspective</h2>
<button class="progress-button" data-style="rotate-angle-left" data-perspective data-vertical>Отправить</button>
</section>
<section>
<h2>rotate-angle-right <br/>perspective</h2>
<button class="progress-button" data-style="rotate-angle-right" data-perspective data-vertical>Отправить</button>
</section>
</div>
<div class="wrapper">
<section>
<h2>rotate-side-down <br/>perspective</h2>
<button class="progress-button" data-style="rotate-side-down" data-perspective...
JavaScript
[].slice.call(document.querySelectorAll('button.progress-button')).forEach(function (bttn) {
new ProgressButton(bttn, {
callback: function (instance) {
var progress = 0,
interval = setInterval(function () {
progress = Math.min(progress + Math.random() * 0.1, 1);
instance._setProgress(progress);
if (progress === 1) {
instance._stop(1);
clearInterval(interval);
}
}, 20);
}
});
});