• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 305
  • Last Modified:

How to animate till the time page loads?

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
rpkhare
Asked:
rpkhare
3 Solutions
 
animesxplosionCommented:
0
 
darkappleCommented:

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
 
darkappleCommented:
forgot to add z-index to cover

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

}
0
 
rpkhareAuthor Commented:
Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now