Rails 4: Adding a spinner on link clicks

spinner.md

In Rails 4 it is useful to have a 'page loading' indicator when a user clicks a link. This is a simple way to accomplish that without external libraries. Tested on Rails 4 using TurboLinks.

Great Link for Spinning Loader gifs: http://loading.io/

---

On CSS Page:
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url(image-path('spinner.gif'))
                50% 50%
                no-repeat;
}

---

Javascript (Coffeescript) -- Note: Uses Turbolinks

$(document).on 'page:fetch', ->
  $('#spinner').show()
  return
$(document).on 'page:receive', ->
  $('#spinner').hide()
  return

---

HTML - Use on application.html.haml

.modal#spinner{style:"display:none;"}