public
Last active

Simple loading spinner for long requests with turbolinks and bootstrap modal

  • Download Gist
loading_spinner.coffee
CoffeeScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
@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()
loading_spinner.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
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();
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.