How can I change the ajax spinner

-- HikaShop version -- : 3.0.0
-- Joomla version -- : 3.6.5
-- PHP version -- : 7.0

Hi Hikashop,

I would like to modify the ajax spinner to a slightly have a more subtle version.
It would be nice if you could make a selector so we could choose from the different styles.
Like the way you can with for example the Smart Slider, see video.
VIDEO select spinner style
But this is more a future request.

For now I like to know where I can change this spinner for the moment.

Hope to hear from you.

Hi,

If you want to have different spinner you will have to replace spinner.gif and spinner_02.gif They are located here:

/media/com_hikashop/images/spinner.gif <- this is small spinner icon
/media/com_hikashop/images/spinner_02.gif <- this is default size icon

You can use such online tool to generate your icon. loading.io/

You will lose this changes after hikashop update.

Proper way would be add spinner icons somewhere to your template and use such css:

div.hikashop_checkout_loading div.hikashop_checkout_loading_spinner {

	background:url('ICON_LOCATION_FOLDER/spinner_02.gif') no-repeat center !important;

}

div.hikashop_checkout_loading div.hikashop_checkout_loading_spinner.small_spinner {

	background:url(''ICON_LOCATION_FOLDER/spinner.gif') no-repeat center !important;

}

Thanks! Kyratn, your Custom CSS solution works perfect!!!!!!!
I have changed the big spinner to the small spinner and now it looks better.

div.hikashop_checkout_loading div.hikashop_checkout_loading_spinner {
background:url('/media/com_hikashop/images/spinner.gif') no-repeat center !important;
}

div.hikashop_checkout_loading div.hikashop_checkout_loading_spinner.small_spinner {
background:url('/media/com_hikashop/images/spinner.gif') no-repeat center !important;
}

Hi,

Have you replaced spinner icons in this folder? 'public_html/media/com_hikashop/images/"

If yes, then your css code isn't necessary as it does same. Hikashop already has such css...

This css only would be needed if you would put your spinner icons somewhere inside your template.


Thanks

I know, thanks!