Jump to content

Preloader for WHMCS

Recommended Posts

To create the preloader I used the following code:

Step 1: Create a css file I name it preloader.css

.spinner {
  width: 90px;
  height: 90px;
  background-color: #fff;

  /*margin: 100px auto;*/
position: absolute;
top: 48%;
left: 48%;
background-image: url("url to gif")

/*  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

.spinner-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 999999;

Note *: If you do not want to attract any background image you can use the commented code but you must delete the background code, that way an image is generated by css without bringing background images and gives the same result.

Step 2: Here you must copy the following code in your header.tpl

this should be placed at the beginning of the header.tpl file

<link rel="stylesheet" href="https://mydomain.com/templates/mytheme/css/loadergif.css">

Step 3: This code must paste at the beginning of the "body" tag so that the preloader is loaded.

    <!--CSS Spinner-->
<div class="spinner-wrapper">
<div class="spinner"></div>

Step 4: Now you must test the changes made and clear the cache or press ctrl + f5 to load the changes.


Many times for the design of our whmcs, or themes of the same it is necessary to put preloaders so that the client sees the page well while it is loading.

Share this post

Link to post
Share on other sites


i try but failed, pls help  

iam using whmcs template "six"  ,  my whmcs version is  7.10.1

i follow your guide , but my whmcs became load a blank page (header and footer all gone)

for step 1 ) preloader.css   file: 

    i  put  inside    client/templates/six/css/loadergif.css    (i paste all code you mentioned on step one,  either keep or remove backgound code  also failed)

for step 2)  header.tpl file:

       i replaced the original   file in  /client/templates/six/header.tpl :

     I try both , all faled:

      <link rel="stylesheet" href="https://mydomain.com/templates/mytheme/css/loadergif.css">         


             <link rel="stylesheet" href="https://mydomain.com/templates/mytheme/css/preloader.css">


for step 3) ,  i added code in the same file on step 2, am i right?

i added your code   line 16 after    this  code 


<body data-phone-cc-input="{$phoneNumberInputStyle}">


and before this code" 




pls tell me what wrong of my code, thanks a lot~


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated