Page Loading Animation Method

Question

So I'm looking for the best way to display a loading animation while the rest of my page loads.

I've been looking for a method that allows the animation to load quickly, stops once the website is loaded and the animation is set to display: none, is high quality with good framerate, and works on IE8 and above.

The options that I'm aware of are a gif animation, SVG, plain CSS or javascript. I'm thinking of the animation being as simple as this one, but am not limited to just that. https://d13yacurqjgara.cloudfront.net/users/21046/screenshots/1127381/sample.gif

Which method would best fit my needs?

What are you looking for? You want a gif pictures? – Radonirina Maminiaina Jun 01 '15 at 12:28 — Radonirina Maminiaina, Jun 01 '15 at 12:28
I'm open to the best option that fits my needs above. – Jun 01 '15 at 12:43 — , Jun 01 '15 at 12:43

rssfrncs · Answer 1 · 2015-06-01T13:03:14.350

works on IE8 and above.

Use a .GIF, CSS animation using transforms will not be supported, JavaScript you will have to account for browser differences and SVG I'm not fully sure on.

I've been looking for a method that allows the animation to load quickly,

Any CSS to do with displaying the animation should be placed in the pages mark up (internal), this will ensure that it renders instantaneously on page load.

<style> 
  #loader{
   display: block;
   width: 10%;
   height: 10%;
   position: absolute;
   top: 45%;
   left: 45%;
   background-image: url(loader.gif);
   background-size: cover;
 }
</style>

while the rest of my page loads

Use JavaScripts .onload function to determine when the content has been fully loaded.

window.onload = function () { document.getElementById("loader").style.display = "none"; }

Page Loading Animation Method

1 Answers1

Linked