Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to add loader animation to a page ?

Posted on 2016-11-11
2
Medium Priority
?
85 Views
Last Modified: 2016-11-12
Hi Experts,

Am just curious about how to add Css or js animation loader to my page and how does it working and is there any tutorial on this

Thanks Experts
0
Comment
Question by:karthik80c
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 41883719
to write simple, you can have something like :
test page : https://jsfiddle.net/ueLkgju7/2/

<head>
  <style>
     .overlay {
         top:0;
         left:0;
         position:absolute;
         width:100%;
         height:100%;
         background-color:white;
     }
     .overlay img {
        display: block;
        margin-left: auto;
        margin-right: auto;
     }
  </style>
   <script>
          window.onload = function() {
              document.getElementById("hide_me_when_page_loaded").style.display = "none";
          }
  </script>
</head>
<body>
   <div class="overlay" id="hide_me_when_page_loaded"><img src="" /></div>
your page content follow
</body>

Open in new window


you've lot of tuto using Google search, for example : http://smallenvelop.com/display-loading-icon-page-loads-completely/
1
 
LVL 59

Assisted Solution

by:Julian Hansen
Julian Hansen earned 1000 total points
ID: 41883755
Another sample
HTML
<body>
<div id="loader"></div>
...
</body>

Open in new window

CSS
<style type="text/css">
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.75) url(images/loading2.gif) no-repeat center center;
}
</style>

Open in new window

JavaScript
<script>
window.addEventListener('load', function() {
  var loader = document.getElementById('loader');
  loader.parentNode.removeChild(loader);
});
</script>

Open in new window

Working sample here

EDIT: remove() not supported everywhere updated to use parentNode.removeChild
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

604 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