D3.js - Adding a loading notification during AJAX request

Question

I've got a chart that requires a fair amount of data, enough that it takes about 5-10 seconds to complete the d3.json() request. Is there some way to display a good old-fashioned spinner, or something to that effect during the AJAX request?

Alternatively, should I just use a jQuery AJAX request and follow the standard procedures for showing a spinner (as is described here). Just curious if anyone else has tried this...

Answer 1

I use spin.js for my spinners. Then it's pretty much as you said:

var spinner = new Spinner(opts);
var target;
$(document).ready(function() {
    target = document.getElementById('spinner-box');
});

function findData() {
            $.ajax({
                beforeSend: function() {
                    spinner.spin(target);
                },
                complete: function() {
                    spinner.stop()
                },
                type: 'POST',
                url: // url,
                data: // data,
                success: function() {
                    // do something
                },
                error: function(e) {
                    spinner.stop();
                    // do something
                }
            });
        }

Answer 2

I've done something like that here. The idea is to have the spinner (or other notification) on the static page and replace it inside the AJAX callback.