Loading Spinners in Rails

Snippet Ruby on Rails jQuery CSS

Last updated Feb 16, 2016

If your Rails app performs time consuming AJAX requests, such as image uploads or API calls, it might be nice to let the user know with a spinner animation.

To demonstrate the use of spinners, let’s assume we have a Rails application with an Image model that accepts file uploads via AJAX. While an image is uploading, will show the animated pure CSS spinner. When the upload is complete, we will hide the spinner again. This can be done easily with or without turbolinks in rails. TIP: Check out the AJAX Image Uploads Lesson first.

Lesson Resources

Lesson Checkpoints

1. Spinner CSS

First, we need to define the CSS for our spinner. There’s a variety of samples on the web, but we’re going to use the awesome SpinKit created by Tobias Ahlin. He takes advantage of the @keyframes rule to create animations by continuously shifting from one CSS style to another.

assets/stylesheets/spinner.css

Head over to SpinKit and grab the CSS/HTML you want to use in your app. Drop the styles into the images.scss file and you're ready to go.

With the CSS defined, we just need to add a div with the spinner class where it should appear on the page.

views/images/new.html.erb

<div class="spinner"></div>

Or use HippIcon Spinners

As an alternative, you might want to use the open soruce animated HippIcons spinners. This is a good way to go if your app is already using HippIcons, like us...

Loading...

2. Listen for AJAX with jQuery

At this point, our spinner is spinning endlessly on the page. We can use jQuery to toggle the visibility of the spinner. First, we are going to hide the spinner on page load. Second, we will listen for an AJAX call to start and show the spinner when this event occurs. Last, we will listen for the AJAX call to stop and re-hide the spinner.

javascripts/images.js

$( document ).ready(function() {

  // hide spinner
  $(".spinner").hide();


  // show spinner on AJAX start
  $(document).ajaxStart(function(){
    $(".spinner").show();
  });

  // hide spinner on AJAX stop
  $(document).ajaxStop(function(){
    $(".spinner").hide();
  });

});

3. Delaying the Spinner in Development

If you’re uploading images from your local machine, they will be uploaded almost instantaneously, thereby hiding the spinner very quickly. In development, it is useful to add a delay() to the ajaxStop event. The code below will delay hiding the spinner for 3 seconds after the AJAX call has stopped.

$(document).ajaxStop(function(){
  $(".spinner").delay(3000).hide(0);
});

Comments