Custom loader icon

13/10/2010

Many actions in your Magento store require some processing time and animated spinning loaders are used to indicate the request is being processed. You can replace Magento native loaders with your own.

Loader icons that come with our Magento web-to-print extension or Magento itself can easily changed.

Types of loading spinners

There are two types of spinners – big and normal.

Web-to-print extension native big spinner

Big spinner is used for preview image loading progress. This is the loader that comes up in place of the preview image until it is loaded.

Web to print extension native small spinner

Normal spinner is used for different AJAX requests. This is the loader that comes up in place of the “Update preview” button after a customer clicks it.

Replacing loading spinners

Both spinners are stored at (…skin/frontend/default/zptheme/images) folder of your Magento installation.

Magento big spinner

To replace the big spinner, you need to replace big-spinner.gif file located in (…/skin/frontend/default/zptheme/images) folder of your Magento installation.

Magento small spinner

To replace the small spinner, you need to replace spinner.gif file located in (…/skin/frontend/default/zptheme/images) folder of your Magento installation.

Create your own animated loaders

Spinners are animated GIF images. Simple changes to an existing animated  loader .GIF file can be done with Photoshop and some other image editing applications. Here are a few useful articles on the subject:

See also: