ricrey Posted March 9, 2020 Share Posted March 9, 2020 Is there any way to integrate a "preloader" to whmcs? 0 Quote Link to comment Share on other sites More sharing options...
ricrey Posted March 11, 2020 Author Share Posted March 11, 2020 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> </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. 0 Quote Link to comment Share on other sites More sharing options...
ilovechinahk Posted July 6, 2020 Share Posted July 6, 2020 HI, 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"> or <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" {$headeroutput} pls tell me what wrong of my code, thanks a lot~ 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.