Support » Plugin: Progress Bar » Progress Bars labels *in* the bar?

  • Resolved Tylo


    I’m not sure whether that’s already implemented or easy to modify, but I think it could be somewhat trivial…
    I’d like to specify a label for the progress bars, and it’d show *inside* the bar, so I could have several bars nicely stacked, or with minimal spacing.
    [wppb progress=75 option=animated-candystripe percent=inside label=’inprogress1′]

    Which, in my concept, would display more or less like so (with the coloring behind it, of course):
    [ 75% inprogress 1 ]

    Or maybe

    [ inprogress 1 75% ]

    Any help is appreciated!



Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Chris Reynolds


    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]


    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.

    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

    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.


    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>";
    Plugin Author Chris Reynolds


    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:

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Progress Bars labels *in* the bar?’ is closed to new replies.