In part 1 of our preloader tutorial we taught you how to create a pure CSS3 preloader without images that utilizes CSS3 animations. Now that we have our preloader hiding the unloaded content, we need a method to remove it once all of our content has loaded. In this tutorial we will teach you how to remove your CSS3 preloader on page load using jQuery.

Step 1: Your Website Needs jQuery

Part 2 of our preloader tutorial relies on the jQuery JavaScript library in order to function; you must either link directly to jQuery or download the latest version and upload it to your server.

Download jQuery
You can download the latest version of jQuery HERE.

Step 2: Remove your CSS3 Preloader using jQuery

Now that you have jQuery, you’ll want to add the jQuery code below to wherever you like to keep your jQuery (we recommend in the footer). What this code will do is check to make sure all the content has loaded, once it has, it will then fade out the preloader and remove it from the markup.

jQuery

$(document).ready(function() {
window.onload = function () {
$('#loader').fadeOut(500, function(){ $('#loader').remove(); } );
}
});

Please Note:

• If you’re not placing your jQuery code inside a file and linking to it, don’t forget to wrap it in a SCRIPT tag.

Part 1: How to Code a Pure CSS3 Preloader with Animations

In part 1 of this tutorial we will teach you how to create a pure CSS3 preloader without images that utilizes CSS3 animations.

← Back to Part 1

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.