Development,  Plugin,  WordPress

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-h.gif
border-anim-v.gif border-anim-v.gif
/wp-includes/js/tinymce/skins/lightgray/img loader.gif loader.gif
/wp-admin/images loading.gif loading.gif
spinner.gif spinner.gif
spinner-2x.gif spinner-2x.gif
wpspin_light.gif wpspin_light.gif
wpspin_light-2x.gif wpspin_light-2x.gif
/wp-includes/js/thickbox loadingAnimation.gif loadingAnimation.gif
/wp-includes/js/crop marqueeHoriz.gif marqueeHoriz.gif
marqueeVert.gif marqueeVert.gif
/wp-includes/images spinner.gif spinner.gif
spinner-2x.gif spinner-2x.gif
wpspin.gif wpspin.gif
wpspin-2x.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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *