Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Web Site Functionality _ Add or replace different loader (*.gif)

Posted by: jocky87 Oct 17 2019, 03:08 AM

Hello everyone!

Can someone help me to figure out, how to replace the screen loader, which runs for few sec after the Pay button is pressed. I tried to edit the code in many ways, but something not working still. The image I want to add is very simple and have to appear in middle of the screen during loading period.

Here are my present css code related to small standard loader which is displayed beside the buton:

.spinner {
background-size: 16px 16px;
display: block;
opacity: .7;
filter: alpha(opacity=70);
width: 16px;
height: 16px;
margin: 5px auto 0;

.spinner-inline {
margin-left: 0.5rem;
margin-right: 0.5rem;
float: right;

.spinner-submit {
margin: 1rem;

.show-spinner {
width: 100%;
padding: 10px;

The code for the image should be something like this:

.loader .blockUI.blockOverlay {
background-position: center 50%;
background-repeat: no-repeat;
position: fixed;

Can you please help to arrange the code? Many thanks! smile.gif

Posted by: jocky87 Oct 25 2019, 02:55 AM

This is solved now. I replaced code under all 4 spinner class to:

. {
background-image: url(loading.gif) !important;
position: relative !important;
top: -300px !important;
z-index: 1 !important;
height: 266px !important;
background-position: center !important;
background-repeat: no-repeat !important;

Powered by Invision Power Board (
© Invision Power Services (