Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Site Loading using animation

    Hey all, i don't know if i am in the right place or how to actually search for what i am wanting to do. hopefully i can get pointed in the right direction from you guys.

    I want to create a website where at the start it has a kinda "loading" icon like on flash sites, but i definately don't want to use flash.

    I want to use an image, and as the site is loading in the background, i qould like the image to be filling up from 0% to 100% when page is loaded.. kinda imagine a glass filling with water or an egg timer kinda effect.

    Anyone know how i can do this? or have any good tutorials i can do to play around with this?

    thanks in advance

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it's hard to say without knowing the contents of your page, but one way that this is done is by showing some sort of image (an animated gif is common) until everything is loaded (usually the window's onload event) and then hide it.

    that works well enough for an indeterminate indicator (like a spinning wheel). For a determinate indicator (like a progress bar) that shows how much of the page has loaded you first have to know how much of the page there is. Here's one guy's stab at it which doesn't really reflect the loading state accurately, but at least fakes it pretty well:
    http://www.seabreezecomputers.com/tips/progress.htm

    Personally, I think it's kind of annoying and unneccesary, but that's just a matter of taste I guess...

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,144
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by xelawho View Post
    Personally, I think it's kind of annoying and unneccesary, but that's just a matter of taste I guess...
    I agree, but ....

    Code:
    <span id = "a" class = "styling"><img src="loading.jpg" width = "248" height = "186"></span>
    
    
    <script type = "text/javascript">
    var num = 0;
    var tim;
    
    function showLoad() {
    num ++;
    if (num == 10) {  // erase after 7.5 seconds, = 5 flashes, adjust to suit
    document.getElementById("a").style.display="none";
    window.clearTimeout(tim);
    }
    else if (num%2 == 0) {
    document.getElementById("a").style.display="none";
    tim = window.setTimeout("showLoad()", 750);
    }
    else {
    document.getElementById("a").style.display="inline";
    tim = window.setTimeout("showLoad()",750);
    }
    }
    
    showLoad();
    </script>
    Attached Thumbnails Attached Thumbnails Site Loading using animation-loading.jpg  
    Last edited by Philip M; 02-12-2014 at 08:57 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the replies. I just figure its better to have the loading animation for a feature rich website to at least entertain the reader whilst waiting for the site to load..

    Trying to make the website as interactive as possible.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •