0

I am trying to figure out why my loader spinner is not showing.

Here is my CSS code:

 .loader {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: url(./img/page-loader1.gif) 50% 50% no-repeat rgb(255,255,255);
   filter: alpha(opacity=70);
   -moz-opacity:0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 }

In my file called edit.php, I have a datatable that takes about 3-5 seconds to load. I just want to show a spinner while it's loading.

In my HEAD tags, I call my css files and my javascript files:

 <head>
   <link href="css/bootstrap.css" rel="stylesheet" />
   <script type="text/javascript" src="js/jquery-1.10.2.js"></script>

Also in the HEAD, I have the javascript function that fades out the load spinner:

 <script type="text/javascript">
    $(window).load(function() {
    $(".loader").fadeOut("slow");
    });
 </script>

Then, right beneath the opening BODY tag, I have the DIV that calls the loader class:

 <div class="loader"></div>

The loader gif, called page-loader1.gif is in a directory called img.

In the css file, I have tried to traverse to the directory just to see if this was the problem:

 background: url(./img/page-loader1.gif) 50% 50% no-repeat rgb(255,255,255);
 background: url(../img/page-loader1.gif) 50% 50% no-repeat rgb(255,255,255);
 background: url(img/page-loader1.gif) 50% 50% no-repeat rgb(255,255,255);

None of these methods seem to work.

I tried to add the word TEST in the DIV tag to see what would happen, and the funny thing is, while the page is loading, the word TEST does indeed appear, and then fades out when the page is finished loading.

That tells me the javascript is doing what it is supposed to do. But I cannot seem to get the DIV tag to display the page-loader1.gif.

Can you see what I might be doing wrong?

Please help.

yamanzandem
  • 57
  • 10
  • Try http://tobiasahlin.com/spinkit/. They are pure css and easy to use – Tim Sep 05 '14 at 15:38
  • The image path from CSS is relative to the location of the CSS file. What does your directory structure look like? Can you use Fiddler or F12 network tools to see what the path of the image being requested? Is the request throwing a 404 error? – DaveB Sep 05 '14 at 15:45
  • @DaveB I have a CSS folder (where the CSS files are), and I have an IMG folder. I would think that you would have to back out of the CSS directory and then go into the IMG directory. I thought it would look like this: ../img/filename.gif Is this not correct? – yamanzandem Sep 05 '14 at 17:09
  • @DaveB I just checked...it is throwing a 404 error. It's not finding my bootstrap.css.map??? Same thing with jquery.min.map. Am I missing something because I don't have these files? – yamanzandem Sep 05 '14 at 17:51
  • @yamanzandem You are either missing the files or they are in the wrong place. Check if you have them and if so, move them to where the code is looking for them. I am not sure if they are needed. Check this link: http://stackoverflow.com/q/18365315/139917 – DaveB Sep 05 '14 at 18:10
  • @DaveB, I figured it out. It's what I call 'Programmer Problems.' I was looking at the wrong damn CSS file. SMH... Thanks for your comments. – yamanzandem Sep 05 '14 at 19:22

0 Answers0