You could use individual images or you could use a small bit of CSS to calculate this:
We'll suppose we know what page we're on and it's stored in a variable somewhere in our code.
Given that, we can do a quick percentage calculation of the current progress:
If we're on page 3:
3/30 * 100 = 10
With this stored in a variable we can use it to set the width of our progres bar, relative to its parent:
#myProgressBar{
width: 10%;
}
(You'd be writing the value to the CSS statement using your language of choice, C# in this case).
Here's a quick sample of how it might look:
http://jsfiddle.net/QnbdZ/1/