The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Add or replace different loader (*.gif)
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-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

Posts in this topic

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: 4th April 2020 - 11:08 AM