6.3.1, 6.3.0
An eCommerce loading button with submit and process order functionality. This includes variants of loading icons on order process.
<div class="ecommerce-loading-button text-center">
<div class="loading-button">
<button type="button" class="primary button" data-loading-start>
Submit Order
</button>
<button type="button" class="primary button hide" data-loading-end>
<i class='fa fa-refresh fa-spin'></i> Processing Order
</button>
</div> <!-- refresh -->
<div data-success-message class="callout success hide">
Thanks, your order has been processed!
</div>
</div>
$('[data-loading-start]').click(function() {
$(this).addClass('hide');
$(this).parent().find('[data-loading-end]').removeClass('hide');
setTimeout(function() {
$('[data-loading-start]').removeClass('hide');
$('[data-loading-end]').addClass('hide');
$('[data-success-message]').removeClass('hide')
}, 5000)
});