1 2 Previous Next 46 Replies Latest reply on Dec 16, 2014 9:30 PM by CristianoSilva078

    I need to create an advanced preloader bar.

    20th Anakin

      I need to create a pre loader that show the percent of the page loaded by the percent colored in of the preloader bar. It would alos be great if the bar said loading under the preloader. The preloader bar also needs

      to stay center of the page no matter the screen resolution. Could some create one and place it for download

        • 1. Re: I need to create an adavanced preloader bar.
          Zaxist Level 4

          Copy Paste these Codes in your preloader > loading action

           

          and save this css file in your main edge folder beside index.html file

           

          Css download Link : http://www.mediafire.com/view/?kb11s474aipt39w

           

           

          Codes :

           

           

          var QueryLoader = {

                  overlay: "",

                  loadBar: "",

                  preloader: "",

                  items: new Array(),

                  doneStatus: 0,

                  doneNow: 0,

                  selectorPreload: "body",

                  ieLoadFixTime: 2000,

                  ieTimeout: "",

           

           

                  init: function() {

                          if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {

                                  //break if IE6                 

                                  return false;

                          }

                          QueryLoader.spawnLoader();

                          QueryLoader.getImages(QueryLoader.selectorPreload);

                          QueryLoader.createPreloading();

           

           

                          //help IE drown if it is trying to die

                          QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);

                  },

           

           

                  ieLoadFix: function() {

                          if(jQuery.browser.msie){

                                  if ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {

                                          QueryLoader.imgCallback();

                                          QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);

                                  }

                          }

                  },

           

           

                  imgCallback: function() {

                          QueryLoader.doneNow ++;

                          QueryLoader.animateLoader();

                  },

           

           

                  getImages: function(selector) {

                          var everything = $(selector).find("*:not(script)").each(function() {

                                  var url = "";

           

           

                                  if ($(this).css("background-image") != "none") {

                                          var url = $(this).css("background-image");

                                  } else if (typeof($(this).attr("src")) != "undefined" && $(this).prop("tagName").toLowerCase() == "img") {

                                          var url = $(this).attr("src");

                                  }

           

           

                                  url = url.replace("url(\"", "");

                                  url = url.replace("url(", "");

                                  url = url.replace("\")", "");

                                  url = url.replace(")", "");

           

           

                                  if (url.length > 0) {

                                          QueryLoader.items.push(url);

                                  }

                          });

           

           

                  },

           

           

                  createPreloading: function() {

                          QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);

                          $(QueryLoader.preloader).css({

                                  height:         "0px",

                                  width:          "0px",

                                  overflow:       "hidden"

                          });

           

           

                          var length = QueryLoader.items.length;

                          QueryLoader.doneStatus = length;

           

           

                          for (var i = 0; i < length; i++) {

                                  var imgLoad = $("<img></img>");

                                  $(imgLoad).attr("src", QueryLoader.items[i]);

                                  $(imgLoad).unbind("load");

           

           

                                  $(imgLoad).one('load', function() {             //IE Cache Fix   

                                    QueryLoader.imgCallback();

           

           

                                  }).each(function() {

                                    if(this.complete) $(this).load();

                                  });

                                  $(imgLoad).appendTo($(QueryLoader.preloader));

                          }

                  },

           

           

                  spawnLoader: function() {

                          var height = $(window).height();

                          var width = $(window).width();

                          var position = "fixed";

                          var left = $(QueryLoader.selectorPreload).offset()['left'];

                          var top = $(QueryLoader.selectorPreload).offset()['top'];

           

           

                          QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload));

                          $(QueryLoader.overlay).addClass("QOverlay");

                          $(QueryLoader.overlay).css({

                                  position: position,

                                  top: top,

                                  left: left,

                                  width: width + "px",

                                  height: height + "px"

                          });

           

           

                          QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay));

                          $(QueryLoader.loadBar).addClass("QLoader");

           

           

                          $(QueryLoader.loadBar).css({

                                  position: "relative",

                                  top: "50%",

                                  width: "0%"

                          });

           

           

                          QueryLoader.loadAmt = $("<div>0%</div>").appendTo($(QueryLoader.overlay));

                          $(QueryLoader.loadAmt).addClass("QAmt");

           

           

                          $(QueryLoader.loadAmt).css({

                                  position: "relative",

                                  top: "50%",

                                  left: "50%"

                          });

                  },

           

           

                  animateLoader: function() {

                          var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;

           

           

                          if (perc > 99) {

                                  $(QueryLoader.loadAmt).html("100%");

                                  $(QueryLoader.loadBar).stop().animate({

                                          width: perc + "%"

                                  }, 500, "linear", function() {

                                          QueryLoader.doneLoad();

                                  });

                          } else {

                                  $(QueryLoader.loadBar).stop().animate({

                                          width: perc + "%"

                                  }, 500, "linear", function() { });

                                  $(QueryLoader.loadAmt).html(Math.floor(perc)+"%");

                          }

                  },

           

           

                  doneLoad: function() {

                          //prevent IE from calling the fix

                          clearTimeout(QueryLoader.ieTimeout);

                          var height = $(window).height();

           

           

                         //The end animation, adjust to your likings

                          $(QueryLoader.loadAmt).hide();

                          $(QueryLoader.loadBar).animate({

                                  height: height + "px",

                                  top: "0%"

                          }, 500, "linear", function() {

                                  $(QueryLoader.overlay).fadeOut(800);

                                  $(QueryLoader.preloader).remove();

                          });

                  }

          }

          yepnope({nope:[

                                                            'QueryLoader.css',

                                                            ],complete: initialize});

          function initialize (){

                                                            QueryLoader.init();

          }

           

           

          you can edit css file to whatever style you want

           

          Zaxist

          • 2. Re: I need to create an adavanced preloader bar.
            sarhunt Adobe Employee

            Wow Zaxist, that is super cool!!

            • 3. Re: I need to create an adavanced preloader bar.
              sabermaster28 Level 1

              Thats great although how do you install the code. Secondly would it be possible to place a finished version in edge for download

               

              Thanks again Zaxist.

              .

              • 4. Re: I need to create an adavanced preloader bar.
                Zaxist Level 4

                Thank you in advanced Sarah

                your comment is very mean to me

                i'm glad that i can do something useful..

                 

                Zaxist

                • 5. Re: I need to create an adavanced preloader bar.
                  Zaxist Level 4

                  i cant undrestand what you are mean exactly Sabermaster.. !!

                  Can you say it Sharper ? so i can help you better ..

                   

                  Zaxist

                  • 6. Re: I need to create an adavanced preloader bar.
                    sabermaster28 Level 1

                    To be more precise. What program do you to install the code which you have placed. Do you use Dreamweaver or Edge to place the code. If its edge where do place the code example on the Stage and then

                    in creationcomplete or compistionready etc.. Also would it be possible for you to install the preloader in a Edge file and then place the edge file for download. This way I would be ablt to better understand the codes place and function in a typical Edge file or html website once I go through the edge file with code inserted.

                     

                    Thanks again.

                    • 7. Re: I need to create an adavanced preloader bar.
                      Zaxist Level 4

                      as i said in my post you just need to copy code in your preloader > loading actionpreloader.jpg

                      • 8. Re: I need to create an adavanced preloader bar.
                        sabermaster28 Level 1

                        i found whre to insert the code although when I inserted it did not work.Would it be possible for you to create aweb page  version in edge with preloader for download. That way I could get a

                        exact look at how it functions in edge.

                        • 9. Re: I need to create an adavanced preloader bar.
                          resdesign Adobe Community Professional & MVP

                          Awesome preloader! Zaxist you are really a great asset to this forum!

                          • 10. Re: I need to create an adavanced preloader bar.
                            sabermaster28 Level 1

                            I wonder if Zaxist could find the solution. I tryed installing all the code where he said it work under the actions, loading , in the preloading section and nothing worked I got a blank screen at the loading screen.

                            It would be cool if he placed a webpage made in edge with the advanced preloader installed that way I could open it up to see how the coe or preloader is installed in a web page.

                            • 11. Re: I need to create an adavanced preloader bar.
                              Zaxist Level 4

                              thank you redesign, you're the one of very good members in here

                               

                              and i'm sorry sabermaster for answer with some days delay... !! i had internet problem

                               

                              ok i made a sample for you

                               

                              if you had any problems let me know, i will help you ..

                               

                              Zaxist

                               

                              Sample : http://www.mediafire.com/download/9a6m4ii17iruxaa/SlideShowWithPreloaderBar.rar

                              • 12. Re: I need to create an adavanced preloader bar.
                                sabermaster28 Level 1

                                its not completely working. Im getting a black screen with a 0% although the page never loads th percent meter never speeds up from 0 to 100 % loading the page.

                                 

                                Thank you again Zaxist.

                                • 13. Re: I need to create an adavanced preloader bar.
                                  Zaxist Level 4

                                  it wouldn't work on local mode or a very light website under 2 MB ...

                                   

                                  if you want to test it on local use IE9 in edge preview mode

                                   

                                  Zaxist

                                  • 14. Re: I need to create an adavanced preloader bar.
                                    sabermaster28 Level 1

                                    I tryed installing IE9 and the page with preloader still are not working.What is local mode and would it be possible to have preloader that always stay center of tthe page no matter screen resolution plus shows percent loaded in the form of percent 0% to 100% or in the form of a bar while saying loading all at the same time.

                                     

                                    Thanks again Zaxist.

                                    • 15. Re: I need to create an adavanced preloader bar.
                                      heathrowe Most Valuable Participant

                                      Looks great Zaxist, well done.

                                       

                                      Darrell

                                      • 16. Re: I need to create an adavanced preloader bar.
                                        Zaxist Level 4

                                        Thanks Darrell

                                         

                                         

                                        • 17. Re: I need to create an adavanced preloader bar.
                                          roti62

                                          The 2MB restriction is important to mention. It seems to be the reason the thing did not work in my Android app projects.

                                           

                                          Why does this restriction exist? Maybe the preloader needs time to be implemented? However, great stuff...

                                          • 18. Re: I need to create an adavanced preloader bar.
                                            Paul_C_B Level 1

                                            its a nice idea but simple hangs at 0% right at the end of animation. I just need a simple 100% to 0% countdown that works. Anyone got any suggestions ?

                                            regards Paul

                                            • 19. Re: I need to create an adavanced preloader bar.
                                              Zaxist Level 4

                                              this preloader works with FF, the other browser will face this issu .. !!

                                               

                                              and i dont know why yet !!

                                               

                                              but i'm working on it

                                               

                                              Zaxist

                                              • 20. Re: I need to create an adavanced preloader bar.
                                                Zaxist Level 4

                                                and one more thing

                                                 

                                                this loading work in every browser but it wont remove that layer, when you got 0% if you do zoom out in your browser you can see that your site is visible onther that 0% layer that didnt removed as it should !!

                                                 

                                                Zaxist

                                                • 21. Re: I need to create an adavanced preloader bar.
                                                  Paul_C_B Level 1

                                                  yes the ongoing browser wars are driving me insane. The variations that browsers present when doing multiple languages is major. Especially Russian

                                                  do you have just a simple 100% to 0% without the screen animation ?

                                                  • 22. Re: I need to create an adavanced preloader bar.
                                                    Zaxist Level 4

                                                    you can make this Preloader without animation, you just need to remove those lines that create the animations and also you can set animation and background color same then there would be no animation also !!

                                                     

                                                    and creating realtime loading with jquery is very hard, and this is the only realtime loading and the others are jist like an animation gift !!

                                                     

                                                    Zaxist

                                                    • 23. Re: I need to create an adavanced preloader bar.
                                                      Paul_C_B Level 1

                                                      yes I have searched everywhere for a solution and you my friend are the only person that has come close. You're a genious

                                                      Im a seasoned designer with some code experience but I am not really a code jockey Hmm I doubt I would be able to figure out which code is which to remove the animation code. I dont suppose you could strip it out for me ?

                                                      Paul

                                                      • 24. Re: I need to create an adavanced preloader bar.
                                                        Zaxist Level 4

                                                        also i tried some now and found a way to fix that 0% issu with other browsers

                                                         

                                                        you just add this line in your html file :

                                                         

                                                        <body style="margin:0;padding:0;">

                                                                  <div id="Stage" class="EDGE-23464340">

                                                           <img id="black" src="pix.png">

                                                                  </div>

                                                        </body>

                                                         

                                                        this is a pixel with your background site color that would be hidden in your site at left-top

                                                         

                                                        if you do this trick the animation will work without any problem in all browsers

                                                         

                                                        just test it and let me know

                                                         

                                                        link to a pix file with black color : http://www.mediafire.com/view/7zte02fcndjqvin/Pix.png

                                                         

                                                        and one more thing :

                                                         

                                                        Do not forget to set your images tag in your Project as img not div

                                                         

                                                        this is very important to make loading work Perfect

                                                         

                                                        and also if you remove that QueryLoader.css file your loading would be with no animation

                                                         

                                                        Zaxist

                                                        • 25. Re: I need to create an adavanced preloader bar.
                                                          Paul_C_B Level 1

                                                          sadly all of my images are within div tags and I have six variations (languages) of the same site

                                                          • 26. Re: I need to create an adavanced preloader bar.
                                                            Zaxist Level 4

                                                            you can easily change them from div to img in edge animate by clicking on them  then on the left panel in front of name click on the div and select img

                                                             

                                                            Zaxist

                                                            • 27. Re: I need to create an adavanced preloader bar.
                                                              Paul_C_B Level 1

                                                              PMd you. I did the changes and sent you a link to the test site.

                                                              Also, the site has now got a space at the top which if you click to one of the languages, youll see shouldnt be there. See right hand grey bar

                                                              • 28. Re: I need to create an adavanced preloader bar.
                                                                Zaxist Level 4

                                                                i didn't received your PM yet !!

                                                                 

                                                                Zaxist

                                                                • 30. Re: I need to create an adavanced preloader bar.
                                                                  Zaxist Level 4

                                                                  Send it again

                                                                   

                                                                  Zaxist

                                                                  • 32. Re: I need to create an adavanced preloader bar.
                                                                    Zaxist Level 4

                                                                    Check your PM

                                                                     

                                                                    Zaxist

                                                                    • 33. Re: I need to create an advanced preloader bar.
                                                                      Jam Zhang

                                                                      Zaxist. It's amazing! Is it using the interface defined by Adobe Edge? It works with Immediate Mode but caused js runtime error which i can't trace into. And it failed with Polite Mode. Network transfer just stops with no error / warning traced in the console. My asset is about 20MB large. What will the problem be?

                                                                       

                                                                      BTW, if I remove the preloader code, Polite Mode will work. But it doesn't preload all images well. Some big pictures are still uncached and take time to load.

                                                                       

                                                                      My sample URL is http://porsche.01cosmos.com/m/

                                                                      • 34. Re: I need to create an adavanced preloader bar.
                                                                        lemuelstudio

                                                                        Hi Zaxist, Ive tried your code but no sucess cause I have a lot of divs in my project.

                                                                        To restore my project, i've deleted the code in Preloader Action, and deleted the Code in my html linked to the png pixel suggested here to correct the loading.

                                                                        Now I have a black frame covering some symbols in my project.

                                                                        How can i get rid of that black frame?

                                                                         

                                                                        This is my site: www.wingsdc.com.br/fibaro/fibaro.html

                                                                         

                                                                        Thanks

                                                                        • 35. Re: I need to create an advanced preloader bar.
                                                                          Zaxist Level 4

                                                                          i will check your project and let you know where is the problem..

                                                                          • 36. Re: I need to create an adavanced preloader bar.
                                                                            Zaxist Level 4

                                                                            Try using this One in with these two condition

                                                                             

                                                                            First : set your Preloader on immediate

                                                                             

                                                                            Second : DO NOT Publish your profile as static html

                                                                             

                                                                            ======================== Code=====================

                                                                            var QueryLoader = {

                                                                                    overlay: "",

                                                                                    loadBar: "",

                                                                                    preloader: "",

                                                                                    items: new Array(),

                                                                                    doneStatus: 0,

                                                                                    doneNow: 0,

                                                                                    selectorPreload: "body",

                                                                                    ieLoadFixTime: 10,

                                                                                    ieTimeout: "",

                                                                             

                                                                             

                                                                                    init: function() {

                                                                                            if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {

                                                                                                    //break if IE6                 

                                                                                                    return false;

                                                                                            }

                                                                                            QueryLoader.spawnLoader();

                                                                                            QueryLoader.getImages(QueryLoader.selectorPreload);

                                                                                            QueryLoader.createPreloading();

                                                                             

                                                                             

                                                                                            //help IE drown if it is trying to die

                                                                                            QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);

                                                                                    },

                                                                             

                                                                             

                                                                                    ieLoadFix: function() {

                                                                                            if(jQuery.browser.msie){

                                                                                                    if ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {

                                                                                                            QueryLoader.imgCallback();

                                                                                                            QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);

                                                                                                    }

                                                                                            }

                                                                                    },

                                                                             

                                                                             

                                                                                    imgCallback: function() {

                                                                                            QueryLoader.doneNow ++;

                                                                                            QueryLoader.animateLoader();

                                                                                    },

                                                                             

                                                                             

                                                                                    getImages: function(selector) {

                                                                                            var everything = $(selector).find("*:not(script)").each(function() {

                                                                                                    var url = "";

                                                                             

                                                                             

                                                                                                    if ($(this).css("background-image") != "none") {

                                                                                                            var url = $(this).css("background-image");

                                                                                                    } else if (typeof($(this).attr("src")) != "undefined" && $(this).prop("tagName").toLowerCase() == "img") {

                                                                                                            var url = $(this).attr("src");

                                                                                                    }

                                                                             

                                                                             

                                                                                                    url = url.replace("url(\"", "");

                                                                                                    url = url.replace("url(", "");

                                                                                                    url = url.replace("\")", "");

                                                                                                    url = url.replace(")", "");

                                                                             

                                                                             

                                                                                                    if (url.length > 0) {

                                                                                                            QueryLoader.items.push(url);

                                                                                                    }

                                                                                            });

                                                                             

                                                                             

                                                                                    },

                                                                             

                                                                             

                                                                                    createPreloading: function() {

                                                                                            QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);

                                                                                            $(QueryLoader.preloader).css({

                                                                                                    height:         "0px",

                                                                                                    width:          "0px",

                                                                                                    overflow:       "hidden"

                                                                                            });

                                                                             

                                                                             

                                                                                            var length = QueryLoader.items.length;

                                                                                            QueryLoader.doneStatus = length;

                                                                             

                                                                             

                                                                                            for (var i = 0; i < length; i++) {

                                                                                                                              (function(i) {

                                                                                                    var imgLoad = $("<img></img>");

                                                                                                    $(imgLoad).attr("src", QueryLoader.items[i]);

                                                                                                    $(imgLoad).unbind("load");

                                                                             

                                                                             

                                                                                                    $(imgLoad).one('load', function() {             //IE Cache Fix   

                                                                                                      QueryLoader.imgCallback();

                                                                             

                                                                             

                                                                                                    }).each(function() {

                                                                                                      if(this.complete) $(this).load();

                                                                                                    });

                                                                                                    $(imgLoad).appendTo($(QueryLoader.preloader));

                                                                                                      })(i);

                                                                                                                    }

                                                                                                },

                                                                             

                                                                             

                                                                                    spawnLoader: function() {

                                                                                            var height = $(window).height();

                                                                                            var width = $(window).width();

                                                                                            var position = "fixed";

                                                                                            var left = $(QueryLoader.selectorPreload).offset()['left'];

                                                                                            var top = $(QueryLoader.selectorPreload).offset()['top'];

                                                                             

                                                                             

                                                                                            QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload));

                                                                             

                                                                             

                                                                                            $(QueryLoader.overlay).css({

                                                                                                                                  "background-color":"#000",

                                                                                                                                        "z-index":"9999",

                                                                                                    position: position,

                                                                                                    top: top,

                                                                                                    left: left,

                                                                                                    width: width + "px",

                                                                                                    height: height + "px"

                                                                                            });

                                                                             

                                                                             

                                                                                            QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay));

                                                                                            $(QueryLoader.loadBar).css({

                                                                                                                                        "background-color":"#ccc",

                                                                                                                                        height:"6px",

                                                                                                    position: "relative",

                                                                                                    top: "50%",

                                                                                                    left: "0%",

                                                                                                    width: "0%"

                                                                                            });

                                                                             

                                                                             

                                                                                            QueryLoader.loadAmt = $("<div>0%</div>").appendTo($(QueryLoader.overlay));

                                                                                            $(QueryLoader.loadAmt).css({

                                                                                                                                        color:"#666",

                                                                                                                                        "font-family":"'Trebuchet MS',Arial,Helvetica,sans-serif",

                                                                                                                                        "font-size":"24px",

                                                                                                                                        "font-weight":"700",

                                                                                                                                        "line-height":"50px",

                                                                                                                                        height:"50px",

                                                                                                                                        width:"100px",

                                                                                                                                        margin:"-60px 0 0 -50px",

                                                                                                    position: "relative",

                                                                                                    top: "50%",

                                                                                                    left: "52%"

                                                                                            });

                                                                                    },

                                                                             

                                                                             

                                                                                    animateLoader: function() {

                                                                                            var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;

                                                                             

                                                                             

                                                                                            if (perc > 99) {

                                                                                                    $(QueryLoader.loadAmt).html("100%");

                                                                                                    $(QueryLoader.loadBar).stop().animate({

                                                                                                            width: perc + "%"

                                                                                                    }, 500, "linear", function() {

                                                                                                            QueryLoader.doneLoad();

                                                                                                    });

                                                                                            } else {

                                                                                                    $(QueryLoader.loadBar).stop().animate({

                                                                                                            width: perc + "%"

                                                                                                    }, 500, "linear", function() { });

                                                                                                    $(QueryLoader.loadAmt).html(Math.floor(perc)+"%");

                                                                                            }

                                                                                    },

                                                                             

                                                                             

                                                                                    doneLoad: function() {

                                                                                            //prevent IE from calling the fix

                                                                                            clearTimeout(QueryLoader.ieTimeout);

                                                                                            var height = $(window).height();

                                                                             

                                                                             

                                                                                           //The end animation, adjust to your likings

                                                                                            $(QueryLoader.loadAmt).hide();

                                                                                            $(QueryLoader.loadBar).animate({

                                                                                                    //height: height + "px",

                                                                                                    //top: "0%"

                                                                                            }, 500, "linear", function() {

                                                                                                    $(QueryLoader.overlay).fadeOut(800);

                                                                                                    $(QueryLoader.preloader).remove();

                                                                                            });

                                                                                    }

                                                                            }

                                                                             

                                                                             

                                                                            yepnope({nope:[],complete: initialize});

                                                                            function initialize (){

                                                                                                                              QueryLoader.init();

                                                                            }

                                                                             

                                                                             

                                                                             

                                                                             

                                                                            Zaxist

                                                                            • 37. Re: I need to create an advanced preloader bar.
                                                                              Paul_C_B Level 1

                                                                              Your a good man

                                                                               

                                                                              Sent from my android device.

                                                                              • 38. Re: I need to create an advanced preloader bar.
                                                                                Zaxist Level 4

                                                                                thanx , you are a great man too Dear Paul

                                                                                • 39. Re: I need to create an adavanced preloader bar.
                                                                                  Tomdog

                                                                                  Hi Zaxist,

                                                                                   

                                                                                  First up, thanks for the preloader code, looks really cool.

                                                                                   

                                                                                  However i have an issue, easily fixed im sure.  I have placed in the code and the css file, when i preview the project from the edge file into chrome the animation works beautifully.  However when i preview the html file in chrome the animation stops at 89% and goes no further, hence locking the rest of my website.  If i then refresh the page it loads to 100% but doesn't load other elements of my site (like the sound).

                                                                                   

                                                                                  You can find what im talking about at www.monsterreel.com.au/test

                                                                                   

                                                                                  I think its an easy fix, just not sure what to do.

                                                                                   

                                                                                  Thanks heaps,

                                                                                  Tom

                                                                                  1 2 Previous Next