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


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>

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

$(document).ready(function () {
        .ajaxStart(function () {
        .ajaxStop(function () {

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.