Let us know what you think about the new Building Blocks

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

Featured Image Block grid

F6
by Kevin Ball
media

Blockquote Styles

F6
by Harry Manchanda
media

Neat Article container

F6
by Harry Manchanda

Foundation

Foundation is the most advanced responsive front-end framework in the world. Foundation is made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.

Want more?

Talk to us

Tweet us at
@ZURBfoundation

Get involved in
our amazing community.

Stay Updated

Keep up with the latest on Foundation. Find us on Github.

Stay Connected

© 1998‐2017 ZURB, Inc. All rights reserved.