Q & A : Using images in your progress bar

Every played around with images in your progress bars? One of our members is having problems and submitted this question.

Q: Have you guys ever worked with custom images being used in a progress bar? I am experimenting with progress bars and I cannot get my image to appear. In this article we will show you how to add a image to your progress bar

If you have not played around with progress bars yet, then read this article first it will help you understand the basics. Now that you know that basics we can take the next step and turn our bar into an image bar. First off if we look at our HTML template we will see that we have the following code in it,


what we need to do is to change it into an image progress bar by using the code,


and as long as we have the image file in the same location as the html template then it will show in professional. However if we wanted to use this on a server we would have to make sure that the image file was available on the server. So the location of the file could be ,

or if we where using image cache then it might be something like,

And there you have it a progress bar with images.

Leave a Comment

%d bloggers like this: