Create a gist now

Instantly share code, notes, and snippets.

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', =>
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>
spinner: null
add_spinner: ->
$('body div#page-spinner').modal()
remove_spinner: ->
$('div#page-spinner').on 'hidden', ->
$(document).on 'page:fetch', ->
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>\
spinner: null,
add_spinner: function() {
return $('body div#page-spinner').modal();
remove_spinner: function() {
return $('div#page-spinner').on('hidden', function() {
return $(this).remove();
$(document).on('page:fetch', function() {
return PageSpinner.spin();


Sanmoo commented Nov 4, 2015


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment