CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nikhil Tamhankar
Nikhil Tamhankar

Reputation: 439

How to show progress bar until the page completely loads in HTML5/CSS3?

I want a Flash website for loading my html5/css3 webpage.

The page should only appear when it is completely rendered. Before it is displayed, a loading bar must appear.

How should I do that? Do I need something else apart from HTML5 and CSS3?

Please provide me with the tutorial.

Upvotes: 3

Views: 21128

Answers (5)

CodeHacker
CodeHacker

Reputation: 2138

Put a div at the beginning of your page (well this is a spinner and not a loading bar... but...)

    <div id="work-in-progress">
        <div class="work-spinner"></div>
    </div>

then using JQuery bind to the load event... which gets fired when the page is loaded

  $(window).bind("load", function () {
        $('#work-in-progress').fadeOut(100);
    });

and add some css to the div to

#work-in-progress {
  position: fixed;
  width: 100%;
  height: 100%;
  font-size: 150px;
  text-align: center;
  vertical-align: middle;
  color: #000000;
  z-index: 200000;
  background-color: #FFFFFF;
}

.work-spinner {
  background-color: rgba(0,0,0,0);
  border: 9px solid rgba(27,61,226,0.9);
  opacity: .9;
  border-left: 5px solid rgba(0,0,0,0);
  border-radius: 120px;
  -webkit-box-shadow: 0 0 35px #1B3DE2;
  box-shadow: 0 0 35px #1B3DE2;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  -moz-animation: spin .5s infinite linear;
  -webkit-animation: spin .5s infinite linear;
  -o-animation: spin .5s infinite linear;
  animation: spin .5s infinite linear;
}

@-moz-keyframes spin {
 from {
     -moz-transform: rotate(0deg);
 }
 to {
     -moz-transform: rotate(360deg);
 }
}

@-webkit-keyframes spin {
 from {
     -webkit-transform: rotate(0deg);
 }
 to {
     -webkit-transform: rotate(360deg);
 }
}

@keyframes spin {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
}
@-o-keyframes spin {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
}

Upvotes: 10

asdflkjwqerqwr
asdflkjwqerqwr

Reputation: 1189

pimboden's answer is great, but it needs the actual keyframes to animate.

Here's the missing CSS:

@-moz-keyframes spin {
     from {
         -moz-transform: rotate(0deg);
     }
     to {
         -moz-transform: rotate(360deg);
     }
 }

 @-webkit-keyframes spin {
     from {
         -webkit-transform: rotate(0deg);
     }
     to {
         -webkit-transform: rotate(360deg);
     }
 }

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
 }
 @-o-keyframes spin {
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
 }

Upvotes: 5

Ian Ryan Clarke
Ian Ryan Clarke

Reputation: 278

Here may be a step in the right direction:

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

This only shows the website when everything is loaded!

Upvotes: 0

Jonas Libbrecht
Jonas Libbrecht

Reputation: 787

That's a big question but I can push you in a direction:

$(window).load(function(){  
//initialize after images are loaded  
});

Sometimes you want to manipulate/render pictures or webpages. For example you want to verticaly and horizontaly align a picture and you need to get the width and height of the picture in order to do that. With $(document).ready() you won’t be able to do that if the visitor doesn’t have the image already loaded, in which case you need to initialize the jquery alignment function when the image finishes loading.

Upvotes: 0

Anil Maharjan
Anil Maharjan

Reputation: 441

If you are using huge number of images and just want your users to wait until they get loaded instead of showing slowly revealing images you can use

https://github.com/alexanderdickson/waitForImages

Its pretty much all you may want because rest of the page is just text [if its normal size web page]. It will get loaded in no time.

Upvotes: 1

Related Questions