Skip to content

Instantly share code, notes, and snippets.

@cpuguy83
Last active August 30, 2020 13:49
Show Gist options
  • Save cpuguy83/5016442 to your computer and use it in GitHub Desktop.
Save cpuguy83/5016442 to your computer and use it in GitHub Desktop.
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
Copy link

asdas

@Sanmoo
Copy link

Sanmoo commented Nov 4, 2015

Thanks

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