The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Add or replace different loader (*.gif)
jocky87
post Oct 17 2019, 03:08 AM
Post #1





Group: Members
Posts: 2
Joined: 16-October 19
Member No.: 27,016



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-image:url(loader.gif);
background-position: center 50%;
background-repeat: no-repeat;
position: fixed;
}

Can you please help to arrange the code? Many thanks! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jocky87
post Oct 25 2019, 02:55 AM
Post #2





Group: Members
Posts: 2
Joined: 16-October 19
Member No.: 27,016



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 10:24 PM