[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to animate till the time page loads?

Posted on 2009-12-26
5
Medium Priority
?
301 Views
Last Modified: 2012-05-08
Sometimes you might have seen that when you click a button on the webpage, a black transparent cover drops on the webpage and you need to wait till the page completely loads.

I either want to do this or show animation till all the images and controls on the webpage gets loaded. How to do this?
0
Comment
Question by:rpkhare
5 Comments
 
LVL 2

Accepted Solution

by:
animesxplosion earned 501 total points
ID: 26124238
0
 
LVL 11

Assisted Solution

by:VanHackman
VanHackman earned 501 total points
ID: 26124652
0
 
LVL 9

Expert Comment

by:darkapple
ID: 26126866

CSS:

#cover{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  display:block;
  /*background:url(someanimation);*/
)


HTML:

<body onload="document.getElementById('cover').style.display='none'">
<div id="cover"></div>

...
...


</body>

Open in new window

0
 
LVL 9

Assisted Solution

by:darkapple
darkapple earned 498 total points
ID: 26126923
forgot to add z-index to cover

#cover{
...
z-index:9999;
....

}
0
 
LVL 8

Author Closing Comment

by:rpkhare
ID: 31670024
Thanks
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
This holiday season, we’re giving away the gift of knowledge—tech knowledge, that is. Keep reading to see what hacks, tips, and trends we have wrapped and waiting for you under the tree.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month18 days, 8 hours left to enroll

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question