Add a preloader to any theme

Developer help
1

I am trying to insert a preloader into my theme but I get a continuously looping animation.
The HTML was inserted in default.hbs and the CSS & JS triggered via code injection.
Any suggestions on how can I make this work?

Thank you

HTML

<!-- Preloader -->
<div id="preloader">
  <div id="status">&nbsp;</div>
</div>

CSS

body {
  overflow: hidden;
}


/* Preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}

JS

$(window).on('load', function() { // makes sure the whole site is loaded 
  $('#status').fadeOut(); // will first fade out the loading animation 
  $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website. 
  $('body').delay(350).css({'overflow':'visible'});
})
2

The loading function uses jQuery. If you’re not already using jQuery on your site, then the animation will never stop because the JS will fail. You would either need to load jQuery or rewrite the scripts in vanilla JS. If you can share your site, that would help in the diagnosis.

As an aside, Ghost is pretty fast and likely doesn’t need a preloading animation, which might give the user the impression that the site is taking even longer to load than it really is.

1 Like
3

Thanks, @RyanF ! I build a multipurpose theme that is not designed only for blogging and so I want to explore different UX scenarios. Anyways, I figured it out. I put the JS into default.hbs, and it works. Thanks again for your advice.

1 Like