Intro

Just with a few lines of code, it's easy to show a spinner when making an ajax request using just CSS.

Code

The loading class is for the div that will contain the spinner and the other classes are for the spinner.

.loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
}

.spinner {
    left: 50%;
    margin-left: -4em;
    font-size: 10px;
    border: .8em solid rgba(218, 219, 223, 1);
    border-left: .8em solid rgba(58, 166, 165, 1);
    animation: spin 1.1s infinite linear;
}

.spinner, .spinner:after {
    border-radius: 50%;
    width: 8em;
    height: 8em;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -4.05em;
}

@keyframes spin {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

The following snippet is all you need to add your spinner onto your web page. Add this where you want to include a spinner, possibly shared layout, but it will really depend on your use case.

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

The javascript below is all you need to add the spinner to show and hide everytime an ajax request is made.

$(document).ready(function () {
    $('#loading').hide()
        .ajaxStart(function () {
            $(this).show();
        })
        .ajaxStop(function () {
            $(this).hide();
    });
});

End Result

When all the code has been implemented you should get something like the following. A good option for showing your users something is in progress without too much effort.