How do you use WordPress’s built in waiting/loading spinner?

WordPress uses a waiting spinner to indicate when its doing something: loading, uploading, doing something AJAX-y, etc. Developers can use the native WordPress spinner in their plugins using the following code: Source for the loading GIF image is /wp-admin/images/wpspin_light-2x.gif (high-resolution version) or /wp-admin/images/wpspin_light.gif. To insert the loading spinner image, you can use an empty HTML… Read More →

WordPress loading spinner

WordPress uses a waiting spinner to indicate when its doing something: loading, uploading, doing something AJAX-y, etc. Developers can use the native WordPress spinner in their plugins using the following code:

Source for the loading GIF image is /wp-admin/images/wpspin_light-2x.gif (high-resolution version) or /wp-admin/images/wpspin_light.gif.

To insert the loading spinner image, you can use an empty HTML div with a class of “spinner”.

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

The spinner class should set the background to wpspin_light.gif image and display to none.

.spinner {
background: url('/wp-admin/images/wpspin_light.gif') no-repeat;
background-size: 16px 16px;
display: none;
float: right;
opacity: .7;
filter: alpha(opacity=70);
width: 16px;
height: 16px;
margin: 5px 5px 0;
}

Now, a plugin can trigger the display of the spinner div using jQuery. Here is an example of triggering the spinner on the click of a button:

$("#showspin").on("click", function(){
$("somediv .spinner").show();
});

Update:

Here are the locations of some other native WordPress loading images (thanks to Tumble Design):

WordPress Loading Animation Image
01
/wp-includes/js/tinymce/themes/advanced/skins/default/img/progress.gif
WordPress Loading Animation Image
01
/wp-admin/images/loading-publish.gif
WordPress Loading Animation Image
01
/wp-admin/images/wpspin_light.gif
WordPress Loading Animation Image
01
/wp-admin/images/wpspin_dark.gif
WordPress Loading Animation Image
01
/wp-includes/js/thickbox/loadingAnimation.gif