Loading spinner with animation

A while back I wrote how to create nice only CSS loading spinners. In this article we are making the spinners even nicer by adding a zoom-in and zoom-out animation to it.

The code

Check out the following fiddle which has all the JavaScript, HTML and CSS you need:

Demo

To add a spinner use the function addSpinner(el, static_pos). Pass the jQuery element el where the spinner should appear. You can set static_pos to true to add a static spinner element rather than an absolute positioned one.

To remove the spinner use the function removeSpinner(el, complete). This function will look for a spinner in the jQuery elment provided with el and will trigger the function complete if you have passed one.

The following demo adds a spinner when an AJAX request is made and removes it when the request is completed:

function loadAjax() {
  $.ajax({
    url: 'https://reqres.in/api/?delay=2',
    beforeSend: function () {
      $('#ajax-button').attr('disabled', true);
      $('#ajax-container').html('');
      addSpinner($('#ajax-container'));
    },
    complete: function (response) {
      $('#ajax-button').attr('disabled', false);
      removeSpinner($('#ajax-container'), function () {
        $('#ajax-container').html('Content loaded.');
      });
    }
  });
}

<button id="ajax-button" onclick="loadAjax()">Send Request</button>
<div id="ajax-container"></div>