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
Post a Comment