Hi,
What would be the best way to create a progres bar with a target marker. So the progress bar shows the progress (the normal way progress bars work) and it also has a marker to show where the progress should be so that you can see if progress is on target, behind or ahead. I know I can do this with two progress bars but it would be good to do it in one.
I’ve attahed a screenshot of how it should look but don’t really know to go about it. Any advice would be much appreciated.
Thanks
Ziad
Your attachment isn’t approved as yet. Do you mean a live progress bar? Because if you do this is not a CSS question! Maybe I understand your question wrong but I would say that Javascript would be the appropriate forum
Hi donboe,
No I don’t mean a live progress bar and yes I agree that that would be a javascript issue. I’m talking about a progress bar that has two values; a current progress value and a target value. It will be clear in the attachement hopefully.
Thanks
Attachment approved 
oh btw the blue vertical line in the attachment shows the target progress which would always appear over the actual progress bar so that you’d always be able to see your target progress and see if you are behind or ahead of the target.
I just saw the attachment, but I still don’t see what this have to do with CSS unless you just want a static progress bar, which I doubt. Can you please be a bit more specific.
Hi,
Do you mean something like this?
http://www.pmob.co.uk/temp/progress-bar2.htm
Just view source for the code but it should be self explanatory but shout if you need help.
In a dynamic environment you could just write the width straight into the style attribute of the span to produce the required width.
Well I guess what I am asking from a CSS perspective is how to have the yellow bar which shows your current progress and the blue marker which shows your target. The progress bar could be static or dynamic, that’s kinda irrelevant. A static progress bar that shows the progress and the target marker would be a good start I guess.
You are right that the complete solution (i.e. with a dynamic progress and target value) would need JS as well but I’m just asking from a display point of view. I’m a backend developer so my CSS is pretty naff so I’m looking for pointers.
Thanks
Hi Paul,
That’s perfect! Did you just knock this up now or did you have this already?
I guess the next thing would be to make it more dynamic so that you could set these values dynamically and change them on the fly. Would it be possible to extend the jquery ui progress bar to add this feature? I guess I shoud post on the jquery forum.
Thanks again.
p.s. btw I changed your .progbar b z-index to 200 so that the red line always shows over the progress bar.
I just converted it from this similar example that someone asked for years ago but in truth would have been just as quick from scratch.
I often make progress bars like this for my client and when they retrieve the details from their database they end up with a percentage figure between 1 and 100% which they simply write directly into the html with php on page load.
e.g.
<div class="progbar ex1"><b></b><span style="width:[B]60%[/B]"></span></div>
You can probably find plenty of pre-made scripts around though.
Html5 has inbuilt progress control though.