3

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.

Metalskin
  • 3,998
  • 5
  • 37
  • 61
Nikhil Tamhankar
  • 439
  • 5
  • 12
  • 30
  • 6
    No, Stack Overflow is not a code/tutorial request site. Use Google – Andy Holmes Jan 22 '14 at 09:05
  • 10
    Com'on! Google sends you to Codeplex or StackOverflow! And why not help, if you have an Answer? Do you want to keep all your knowledge for yourself? Share It! It can make you happy! – CodeHacker Sep 10 '14 at 17:02

5 Answers5

10

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);
 }
}
CodeHacker
  • 2,127
  • 1
  • 22
  • 35
  • That's amazing. So, basically the spinner will keep spinning unless the page load is complete. But it will not show the percentage, right? – Nikhil Tamhankar Jan 24 '14 at 11:19
  • 3
    Yes, because I have no Idea what "percentage" of the page is already loaded. And I don't want to have "MS"-Style : "99% finished2 for 30 seconds... hehe – CodeHacker Jan 29 '14 at 12:22
  • @pimboden I am implementing a pre-loader in one of my FB canvas game developed using HTML,PHP,JAVASCRIPT. The game code is a single index file and it has multiple "div" and multiple submit button on single single "div".each submit button fetches data from database and load data on respective"div".when ever user clicked any of the submit button its execute the pre-loader however i wanted to show pre-loader only once i.e when game starts not every time user click the submit button.i know that submit button reload(refresh) the index file every time user click on submit button. – sanjay Jun 19 '14 at 16:04
5

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);
     }
 }
Gene Bo
  • 11,284
  • 8
  • 90
  • 137
camdenl
  • 1,159
  • 4
  • 21
  • 32
1

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.

Anil Maharjan
  • 441
  • 4
  • 14
0

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.

Jonas Libbrecht
  • 768
  • 1
  • 8
  • 17
0

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!

Ian Ryan Clarke
  • 268
  • 1
  • 8