
Using native WordPress loading icons (spinners) in your plugins
When we create our plugin, sometimes the loading icon (or the spinner icon) can be very useful and handy. It can be used to signal the saving of settings, processing of some data or loading data by Ajax. There are many fields to use, everything is limited by your invention and your needs. I have seen many times programmers create their own “spinners” or use ready-made ones instead of using WordPress ones. Inquiry – Why use those from WordPress? For one reason – to create a consistent interface. And, in addition, to reduce the size of the plugin being created. There are many possibilities, it is worth using them.
WordPress offers several such icons. At present, exactly fifteen. Or ten if we exclude repetitive ones. Not all of these icons are exactly the spinners, but we can safely use such an icon – as long as it suits our purpose. Below is a table in which you will find the file name, path to the file and the icon itself, so that you know if it is worth using it. And in what place you can find it 🙂
Path | File name | Preview |
---|---|---|
/wp-includes/js/imgareaselect | border-anim-h.gif | ![]() |
border-anim-v.gif | ![]() |
|
/wp-includes/js/tinymce/skins/lightgray/img | loader.gif | ![]() |
/wp-admin/images | loading.gif | ![]() |
spinner.gif | ![]() |
|
spinner-2x.gif | ![]() |
|
wpspin_light.gif | ![]() |
|
wpspin_light-2x.gif | ![]() |
|
/wp-includes/js/thickbox | loadingAnimation.gif | ![]() |
/wp-includes/js/crop | marqueeHoriz.gif | ![]() |
marqueeVert.gif | ![]() |
|
/wp-includes/images | spinner.gif | ![]() |
spinner-2x.gif | ![]() |
|
wpspin.gif | ![]() |
|
wpspin-2x.gif | ![]() |
As you can see, some files are repeated. You can find them in /wp-admin/images/ and in /wp-includes/images/. Well, WordPress redundancy. It may be worth reporting this for amendment. Especially that some are repeated in appearance, but not in name anymore… Either way, use a consistent interface and see you at the next tip 🙂

