javascripthtmlcsspreloader

How can I make a gif icon to show on my pre-loader before my website loads

I added this code to my website for a pre-loader to show before my website loads but I was only able to make only a background color show before my website loads.

I am trying to make a gif icon to show on the pre-loader background-color like a loading icon before my website will then load.

What I noticed was that my website loads very fast so only the pre-loader background color shows before my website loads. The pre-loader icon does not show at all.

Below are my codes. I added the CSS and I added the script to the body of my website;

//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#f99e47 url(&#39;https://4.bp.blogspot.com/-CVUATsjGPVg/YEC5gsBL18I/AAAAAAAACw8/g8ABr7RU79kjnJocwCpfQ5wgy1WR0uHRACK4BGAYYCw/s1600/latest%2Blogo.png&#39;) no-repeat 50% 50%;padding:1em 1.2em;display:none}

Here is the result of how it loads on my website: https://mybloggertestpage.blogspot.com/

Please, What am I doing wrong? Thanks.

Solution

  • Check your #page-loader style rule. Remove this &#39; from the url you are using

    url(&#39;https://4.bp.blogspot.com/-CVUATsjGPVg/YEC5gsBL18I/AAAAAAAACw8/g8ABr7RU79kjnJocwCpfQ5wgy1WR0uHRACK4BGAYYCw/s1600/latest%2Blogo.png&#39;)

    to

    url(https://4.bp.blogspot.com/-CVUATsjGPVg/YEC5gsBL18I/AAAAAAAACw8/g8ABr7RU79kjnJocwCpfQ5wgy1WR0uHRACK4BGAYYCw/s1600/latest%2Blogo.png)