Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple loading spinner for long requests with turbolinks and bootstrap modal
@PageSpinner =
spin: (ms=500)->
@spinner = setTimeout( (=> @add_spinner()), ms)
$(document).on 'page:change', =>
@remove_spinner()
spinner_html: '
<div class="modal hide fade" id="page-spinner">
<div class="modal-head card-title">Please Wait...</div>
<div class="modal-body card-body">
<i class="icon-spinner icon-spin icon-2x"></i>
&emsp;Loading...
</div>
</div>
'
spinner: null
add_spinner: ->
$('body').append(@spinner_html)
$('body div#page-spinner').modal()
remove_spinner: ->
clearTimeout(@spinner)
$('div#page-spinner').modal('hide')
$('div#page-spinner').on 'hidden', ->
$(this).remove()
$(document).on 'page:fetch', ->
PageSpinner.spin()
this.PageSpinner = {
spin: function(ms) {
var _this = this;
if (ms == null) {
ms = 500;
}
this.spinner = setTimeout((function() {
return _this.add_spinner();
}), ms);
return $(document).on('page:change', function() {
return _this.remove_spinner();
});
},
spinner_html: '\
<div class="modal hide fade" id="page-spinner">\
<div class="modal-head card-title">Please Wait...</div>\
<div class="modal-body card-body">\
<i class="icon-spinner icon-spin icon-2x"></i>\
&emsp;Loading...\
</div>\
</div>\
',
spinner: null,
add_spinner: function() {
$('body').append(this.spinner_html);
return $('body div#page-spinner').modal();
},
remove_spinner: function() {
clearTimeout(this.spinner);
$('div#page-spinner').modal('hide');
return $('div#page-spinner').on('hidden', function() {
return $(this).remove();
});
}
};
$(document).on('page:fetch', function() {
return PageSpinner.spin();
});
@rbordeanu

This comment has been minimized.

Copy link

commented Oct 16, 2015

asdas

@Sanmoo

This comment has been minimized.

Copy link

commented Nov 4, 2015

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.