Hey,
I tried to implement a preloader to the site similar to: https://weberruss.com/expertise/
(I couldn't really find out how they did it, but it's a lay theme site)
I tried this:
Custom HTML at top:
<div class="preloader"></div>
Custom <head> content:
<script>
window.laytheme.on("newpage", function() {
jQuery('.preloader').fadeOut('slow');
});
</script>
Custom Css:
.preloader {
width:100vw;
height:1px;
position:absolute;
background: black;
margin:0;
animation: fillup .4s ease infinite;
top:0;
left:0;
}
@-webkit-keyframes fillup
{
from { width:0px; }
to { width:100%; }
}
–
The code works, but only on a page reload. So if click on another menu item nothing shows up. (The javascript fadeout works at least)
I used to do preloaders with this js, but have rewritten it according to the laytheme documentation:
$(window).load(function() {
$('.preloader').fadeOut('slow');
});
to:
<script>
window.laytheme.on("newpage", function() {
jQuery('.preloader').fadeOut('slow');
});
</script>
–
I probably made a mistake there - could you help me?
Many thanks in advance,
Markus
