YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar stephan.herby asked

Pageloader module/widget in other template ?

The Pageloader module/widget is just a MUST. Thanks for it !
Any idea on how to integrate it on other template ?
As Tobias has given a such complete answer, i added the "Tutorial" tag :)

  • Feature Request
  • Tutorial
  • Nic & Em


3 Answers


Avatar tobias.m Support answered

Hi @stephan.herby,

here is a quick solution to do that:

Open the theme.php file in the layouts folder and add the following code just below the body tag:

<?php if ($this['widgets']->count('page-loader')) : ?>  
<div class="tm-page-loader uk-position-cover uk-flex uk-flex-column uk-flex-center uk-flex-middle">  
    <?php echo $this['widgets']->render('page-loader'); ?>  
<?php endif; ?>

and save this file.

Open the custom.css file in the css folder and add the following code:

.tm-page-loader {  
    position: fixed;  
    background-color: YOUR-BACKGROUND-COLOR-VALUE;  
    z-index: 1099;  
.tm-page-loader-content {  
    color: YOUR-FONT-COLOR-VALUE !important;  
    text-align: center;  

and save this file.

Open the theme.js file in the js folder and add the following code at the end of the file before the script closed:

    // Hide Loader  
    setTimeout(function() {  
    }, 3000); // Set up the page-loader will automatically moves back the time  


and save this file.

Open the templateDetails.xml in the template directory and add the following code:

<position settings="">page-loader</position>

and save this file.

A better way is its own style as example here

e. g.

  • styles/mystyle/css/custom.css
  • styles/mystyle/layouts/theme.php
  • styles/mystyle/js/theme.js

Now, you can create a new module or widget and set the position page-loader with the following Content e. g.

<div class="tm-page-loader-content">  
    <img class="uk-animation-fade" src="images/yootheme/demo/default/page-loader-rings.svg" width="65" height="50" alt="Demo" style="animation-delay:500ms; ">  
    <h1 class="uk-heading-large uk-margin-top-remove uk-animation-slide-bottom">Nicolas &amp; Emma</h1>  
    <div class="uk-animation-fade" style="animation-delay:800ms; ">September 16, 2016. New York City</div>  

save and Close and test it.


Thank you for your feedback.




Avatar stephan.herby answered

Hi Tobias, I have only one word : Woaw !
Your tutorial is clear and the things works !
I have tried it under Nano3 template and had no problem...
The only thing I changed is :

  1. doing it thrue my own style (like you suggested),
  2. created a js file called pageloader.js (in the "js" folder of my style)
  3. call it thrue the theme.config.php (in the "layouts" folder of my style), like suggested in your documentation

That's great, thank you so much.


Know someone who can answer? Share a link to this question via email or twitter.