function preload() {

        // Get the site width / height
        siteWidth = $(window).width();
        siteHeight = $(window).height();

        // Prepend the Loader Icon (circle) & the Hand
        $('body').prepend('<div id="loadIcon" /><div id="hand" class="grabv" />');

        // Set the Icon variables
        var loadicon = $('#loadIcon');
        var hand = $('#hand');

        // Additional CSS Dependant on the site width / icon width.
        loadicon.css({marginLeft: - loadicon.width() / 2, left: siteWidth / 2});
        hand.css({marginLeft: - hand.width() / 2, left: siteWidth / 2});

        // Position 1 (pull down)
        position1 = (siteHeight / 2) - 21;

        // Positions 2 (throw the load)
        position2v = (siteHeight / 4);
        position2h = (siteWidth / 4);


        // Set a quick timeout
        // for loading of icons
        setTimeout(function() {

            // Animate the position 1 (pull down)
            loadicon.stop().animate({top: position1}, 1500);
            hand.stop().animate({top: position1 + 36}, 1500, function() {

                // Remove + Add the default hand icon
                $(this).removeClass().addClass('default');

                // Animate it to the bottom right a little
                $(this).animate({left: '+=50', top: '+=30'}, 400, function() {

                    // This in scope. [hand]
                    var $this = $(this);

                    // One finger
                    setTimeout(function() {
                        $this.addClass('one').css({left: '-=5', top: '+=1'});
                    }, 500);

                    // Two fingers
                    setTimeout(function() {
                        $this.addClass('two').css({top: '-=2'});
                    }, 1000);

                    // Three fingers
                    setTimeout(function() {
                        $this.addClass('three');
                    }, 1500);

                    // 'OK' hand
                    setTimeout(function() {
                        $this.addClass('ok');
                    }, 2000);

                    // 2.8 Seconds
                    // with 'OK' hand
                    setTimeout(function() {

                        // Remove + Add the default hand icon
                        $this.removeClass().addClass('default');

                        // Animate the hand icon to the loader
                        $this.animate({left: '-=41', top: '-=31'}, 400, function() {

                            // Change to drag icon
                            $(this).addClass('drag');

                            // 0.2 Second timeout
                            setTimeout(function() {

                                // Animate the hand to [position2h/position2v] - use 'easeOutBack' for momentum effect.
                                hand.animate({left: '+='+position2h+'', top: '-='+position2v+''}, 500, 'easeOutBack', function() {

                                    // Add the default hand icon
                                    $(this).removeClass().addClass('default');

                                    // Animate the hand icon to the bottom middle of browser window.
                                    $(this).animate({top: siteHeight, left: siteWidth / 2}, 400, function() {

                                        // Add upside down grab hand icon
                                        $(this).removeClass().addClass('grabu');

                                        // Animate to top -24 (icon height)
                                        $(this).animate({top: -24}, 1000, function() {
                                            $(this).remove();
                                        });

                                        // Animate wrapper to top creating a pulling effect
                                        // -1 because of the top border
                                        $('#wrapper').css({display:'block'}).animate({top: -1}, 1000, function() {

                                            // Add block, overides
                                            // absolute positioning
                                            $(this).addClass('block');

                                            // Site load complete
                                            // Run the footer function
                                            footer();

                                        });

                                    });

                                });

                                // Animate the load icon in sync with the hand icon
                                // Faster because of no easing.
                                loadicon.animate({left: '+='+position2h+'', top: '-='+position2v+''}, 200);

                                // Set timeout to keep it animating
                                setTimeout(function() {

                                    // Speed up the animation for
                                    // momentum effect.
                                    loadicon.animate({left: '+=4000', top: '-=3000'}, 7500);

                                    // Set timeout to fade
                                    // the loader out
                                    setTimeout(function() {
                                        loadicon.fadeOut(400, function() {
                                            $(this).remove();
                                        });
                                    }, 3000);

                                }, 195);

                            }, 200);

                        });

                    }, 2800);

                });
            });

        }, 100);

    }