Skip to content
Create a gist now

Instantly share code, notes, and snippets.

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

asdas

@Sanmoo
Sanmoo commented Nov 4, 2015

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.