Q:

How to make a progress bar with my logo

I want to have a loading bar for my website so it loads the data as soon as the page is opened. The problem is I dont know how to change the loading bar. I have a Logo in PNG that want to change its colour from one to other while the content is loading.  There are many progress bar but what about having an image instead. Here is example of a simple bar: http://jqueryui.com/progressbar/#label
Do you have any idea how to do it?

A:

Have a look at the Progressbar API documentation:
Part of the documentation explains the main class names of the Progressbar Widget, which can be themed via CSS:

ui-progressbar:  The outer container of the progressbar. This element will additionally have a class of ui-progressbar-indeterminate for indeterminate progressbars.
ui-progressbar-value: The element that represents the filled portion of the progressbar.
ui-progressbar-overlay:  Overlay used to display an animation for indeterminate progressbars.

Therfore to add your own logo/image to the bar you want to extend one of these classes.
For example, to make the filled part of the progressbar have a background image define:
.ui-progressbar-value {
    background: url(http://i62.tinypic.com/2uy4mjs.png);
}

You can see my example at the below link:
http://jsfiddle.net/qCCzE/2/

