loading - Making a page transition animation -


i noticed pages on internet (like gizmodo , io9) have page load animation. in latter cases, previous page greyed out small loading "spinner" animation in middle, , second page comes in without blank loading page in between, pages on internet. how done?

hopefully works you... below solution worked me although jquery needed:

first right after body tag add this:

<div id="loading">   <img id="loading-image" src="images/ajax-loader.gif" alt="loading..." /> </div> 

then add style class div , image css:

#loading {   width: 100%;   height: 100%;   top: 0px;   left: 0px;   position: fixed;   display: block;   opacity: 0.7;   background-color: #fff;   z-index: 99;   text-align: center; }  #loading-image {   position: absolute;   top: 100px;   left: 240px;   z-index: 100; } 

and add javascript page (preferably @ end of page, before closing body tag of course):

<script language="javascript" type="text/javascript">    $(window).load(function() { $('#loading').hide();   });  </script> 

then adjust position of loading image , background color of loading div via style class.

this it, works fine. of course have have ajax-loader.gif somewhere.

try ajaxload have great animated gif's there.. :)


Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c++ - Using OpenSSL in a multi-threaded application -

All overlapping substrings matching a java regex -