I've recently started learning JS. I completed a few Lynda courses, but I'm struggling with creating an animated sprite preloader. I've searched extensively on Google and Stack Overflow, and although I found some helpful information, I haven't been able to achieve my desired result yet. Essentially, I have a logo set up as a sprite, and I want the sprite to animate based on the percentage of loaded files.
For example, from 0% to 15%, I want the first frame of the sprite to show, then the second frame between 15% and 30%, and so on until the last frame, at which point the div will be set to 'visibility:hidden'. This is how I envision it:
HTML
<div id="preloader">
CSS
#preloader {
margin: 0-auto;
width: 450px;
height: 400px;
background-color: #282727;
background-image: url(http://roprojects.net/preloader/sprite.PNG)
}
JS I'm not sure about the implementation, so forgive me if what follows sounds naive.
// var percent = Something that would get the numeric progress of the page load;
$( window ).load(function() {
// example of first animation. And I don't even know how I should be going on from here.
// Maybe a for statement, some sort of a loop, was even thinking conditionals.
// Maybe a case/switch
// if (percent > 15 && percent <= 30) {below }
$('#preloader').css('backgroundPosition', '0 -400px');
});
// But ultimately that would require it to ..update itself (loop, I guess?)
This is my first post, thank you for your time and patience. Any external reference is also welcomed, not expecting you to write it for me. Again, thank you a lot!
edit adjust the sprite itself.
edit #2 After examining the preloader example at , I realized that a browser check is performed and upon successful loading, the preloader fades out to reveal the main content. However, I still need to figure out how to manipulate the sprite's animation based on the loading progress. The journey continues.