<%- snippet = capture do %>
  <div id="progress">
    <div class="wrapper">
      <div id="spinner" class="spinner"></div>
      <div class="progress-message"><%= Spree.t(:loading) %>...</div>
    </div>
  </div>
<%- end %>

<div class="style-guide-result">
  <%= snippet %>
</div>

<button id="loading-test-button">Toggle Loading</button>

<script>
  function closeProgress() {
    $("#progress").toggle()
    $(document).off('click', 'body', closeProgress)
  }

  $('#loading-test-button').on('click', function(){
    $("#progress").toggle({
      complete: function(){
        $(document).on('click', 'body', closeProgress)
      }
    })
  });
</script>

<%- snippet = capture do %>
  <div id="progress">
    <div class="wrapper">
      <div id="spinner" class="spinner"></div>
      <div class="progress-message"><%= Spree.t(:loading) %>...</div>
    </div>
  </div>
<%- end %>

<div class="style-guide-result">
  <%= snippet %>
</div>

<button id="loading-test-button">Toggle Loading</button>

<script>
  function closeProgress() {
    $("#progress").toggle()
    $(document).off('mousedown', 'body', closeProgress)
  }

  $('#loading-test-button').on('click', function(){
    $("#progress").toggle({
      duration: 0,
      complete: function(){
        $(document).on('mousedown', 'body', closeProgress)
      }
    })
  });
</script>

Set duration 0 to remove animation from toggle
Set duration 0 to remove animation from toggle

Replace `click` with `mousedown` because the `on` binding method is too fast and the event is fired during the
current event.
All jQuery effects, including .toggle(), can be turned off globally by setting jQuery.fx.off = true, which effectively
sets the duration to 0. For more information, see jQuery.fx.off.
ref http://api.jquery.com/toggle/
