Progress Bars labels *in* the bar?

So you want the *label* to be inside the bar so you don’t have to do something like:

In Progress: [wppb progress=75 percent=inside]

correct?

You could do this with CSS, but it would be tricky. Basically what you’d need to do is position a div with your label inside the progress bar.
https://www.alistapart.com/articles/css-positioning-101/

Or you could probably do it with jQuery by finding *where* you want to add the content and add it in with js after the page loads.

First of all, thanks a lot for the quick reply!
Yeah, I’d like to have the bar span across a side column, and it wouldn’t have enough space to fill label and a reasonably-sized bar.

As of November 2012 (for you future readers), you can check what I mean on https://www.paintingdesk.com

When I started putting the site together I spent days banging my head on the keyboard until the code came out right and I could have a progress bars plugin do what I wanted (TDD), but a future update overwrote that, because I was stupid.

I prefer the WPPB approach, with the bar self-contained in quick code, and I’d rather invest some time digging into that instead.

My idea was to locate where you are “plotting” the % inside the bar, and just append the bar name there. Putting it there and aligning to either side would be good enough for me, I can handle text leaking/overflowing the bar on my own, restricting the name/label size. Any ideas/pointers on how I could achieve that? Not much of a coder here, and zero experience with jQuery definitely take me away from that route.

Thanks!

I got the concept to work, now it is a matter of adjusting the formatting…

on wp-progress-bar.php:

(...)
function wppb( $atts ) {
	extract( shortcode_atts( array(
                'label' => '',
		'progress' => '',		// the progress in %
(...)

(...)
	$wppb_output .= "\">";
	if ($atts['percent']) { // if $percent is not empty, add this
		$wppb_output .= "<div class=\"{$percent}\">{$label}{$progress}%</div>";
(...)

I was going to suggest that, actually. After I thought about it a while, you could always add another attribute. I’m reluctant to add yet another attribute to an already long shortcode that was intended to be simple ??

It seems I can do it with HTML5 as well:

https://stackoverflow.com/questions/12452594/how-can-i-add-label-inside-a-progress-bar-tag

https://jsfiddle.net/qfwTy/

I’m marking this one as ‘closed’, as it is a fairly clear and simple customisation. Thanks, Chris!