preloader с процентной полосой загрузки

подключаем JQuery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>

Добавьте следующий код в код вашей страницы, так же в хедер вашей страницы

<link rel="stylesheet" href="css/queryLoader.css" type="text/css">
<script type='text/javascript' src='js/queryLoader.js'></script>

это в css

.QOverlay {
background-color: #000000;
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC;
height: 1px;
}
.QAmt {
color:#333333;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:40px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

это в файл queryLoader.js

var QueryLoader = {

overlay: "",
loadBar: "",
preloader: "",
items: new Array(),
doneStatus: 0,
doneNow: 0,
selectorPreload: "body",
ieLoadFixTime: 2000,
ieTimeout: "",
init: function() {
    if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {
        // IE6          
        return false;
    }
    if (QueryLoader.selectorPreload == "body") {
        QueryLoader.spawnLoader();
        QueryLoader.getImages(QueryLoader.selectorPreload);
        QueryLoader.createPreloading();
    } else {
        $(document).ready(function() {
            QueryLoader.spawnLoader();
            QueryLoader.getImages(QueryLoader.selectorPreload);
            QueryLoader.createPreloading();
        });
    }
    // IE  :)
    QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
},
ieLoadFix: function() {
    var ie = navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/);
    if (ie[0].match("MSIE")) {
        while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
            QueryLoader.imgCallback();
        }
    }
},
imgCallback: function() {
    QueryLoader.doneNow ++;
    QueryLoader.animateLoader();
},
getImages: function(selector) {
    var everything = $(selector).find("*:not(script)").each(function() {
        var url = "";
        if ($(this).css("background-image") != "none") {
            var url = $(this).css("background-image");
        } else if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagName").toLowerCase() == "img") {
            var url = $(this).attr("src");
        }
        url = url.replace("url(\"", "");
        url = url.replace("url(", "");
        url = url.replace("\")", "");
        url = url.replace(")", "");
        if (url.length > 0) {
            QueryLoader.items.push(url);
        }
    });
},
createPreloading: function() {
    QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);
    $(QueryLoader.preloader).css({
        height:     "0px",
        width:      "0px",
        overflow:   "hidden"
    });
    var length = QueryLoader.items.length; 
    QueryLoader.doneStatus = length;
    for (var i = 0; i < length; i++) {
        var imgLoad = $("<img></img>");
        $(imgLoad).attr("src", QueryLoader.items[i]);
        $(imgLoad).unbind("load");
        $(imgLoad).bind("load", function() {
            QueryLoader.imgCallback();
        });
        $(imgLoad).appendTo($(QueryLoader.preloader));
    }
},
spawnLoader: function() {
    if (QueryLoader.selectorPreload == "body") {
        var height = $(window).height();
        var width = $(window).width();
        var position = "fixed";
    } else {
        var height = $(QueryLoader.selectorPreload).outerHeight();
        var width = $(QueryLoader.selectorPreload).outerWidth();
        var position = "absolute";
    }
    var left = $(QueryLoader.selectorPreload).offset()['left'];
    var top = $(QueryLoader.selectorPreload).offset()['top'];
    QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload));
    $(QueryLoader.overlay).addClass("QOverlay");
    $(QueryLoader.overlay).css({
        position: position,
        top: top,
        left: left,
        width: width + "px",
        height: height + "px"
    });
    QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay));
    $(QueryLoader.loadBar).addClass("QLoader");
    $(QueryLoader.loadBar).css({
        position: "relative",
        top: "50%",
        width: "0%"
    });
    QueryLoader.loadAmt = $("<div>0%</div>").appendTo($(QueryLoader.overlay));
    $(QueryLoader.loadAmt).addClass("QAmt");
    $(QueryLoader.loadAmt).css({
        position: "relative",
        top: "50%",
        left: "50%"
    });
},
animateLoader: function() {
    var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
    if (perc > 99) {
        $(QueryLoader.loadAmt).html("100%");
        $(QueryLoader.loadBar).stop().animate({
            width: perc + "%"
        }, 500, "linear", function() { 
            QueryLoader.doneLoad();
        });
    } else {
        $(QueryLoader.loadBar).stop().animate({
            width: perc + "%"
        }, 500, "linear", function() { });
        $(QueryLoader.loadAmt).html(Math.floor(perc)+"%");
    }
},
doneLoad: function() {
    // IE
    clearTimeout(QueryLoader.ieTimeout);

    if (QueryLoader.selectorPreload == "body") {
        var height = $(window).height();
    } else {
        var height = $(QueryLoader.selectorPreload).outerHeight();
    }

    $(QueryLoader.loadAmt).hide();
    $(QueryLoader.loadBar).animate({
        height: height + "px",
        top: 0
    }, 500, "linear", function() {
        $(QueryLoader.overlay).fadeOut(800);
        $(QueryLoader.preloader).remove();
    });
}
}

Следующий код поместите в конец страницы

<script type='text/javascript'>
QueryLoader.init();
</script>