eCommerce Loading Button

By Harry Manchanda

F6
#
button ecommerce loader notification alert interaction icons callout js
How do I use This?

An eCommerce loading button with submit and process order functionality. This includes variants of loading icons on order process.

HTML
<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>
JS
$('[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)
});

Similar Building Blocks

media

Responsive Blog Post

F6
by Laurel Beyers
media

News Image Gallery

F6
by Harry Manchanda
media

Neat Article container

F6
by Harry Manchanda