26

I've set up a simple jQuery UI ProgressBar:

<script type="text/javascript">
    $(function() {
        $("#progressbar").progressbar({
                value: 35
        });
    });
</script>
<div id="progressbar">  </div>

Among other things, I'd like to display some text in the progress-bar (for starters, I'd just use the "value").

I can't seem to get this to work.

Bonus Question: How do I format the displayed text (e.g. color, alignment)?

6 Answers 6

34

Instead of introducing another element (span) and a new style, leverage what is already there like this:

var myPer = 35;
$("#progressbar")
    .progressbar({ value: myPer })
    .children('.ui-progressbar-value')
    .html(myPer.toPrecision(3) + '%')
    .css("display", "block");

The css("display", "block") is to handle the case where the value is 0 (jQuery UI sets a display: none on the element when the value is 0).

If you look at the source of The demo, you'll notice that a <div class="ui-progressbar-value"> is added. You can simply override this class in your own CSS, like:

.ui-progressbar-value {
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    padding-left: 10px;
}
2
  • Looks like the code in the demo link is different than the code here, now. The code in the demo worked well. Mar 15, 2013 at 21:36
  • how to show the content on non-progressed area with some value, (total -progressed) area. Nov 21, 2019 at 11:58
8

The way I did it was:

<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>

You can adjust the margin-top and margin-left so that the text is in the center of the progress bar. Then you apply the progressbar plugin for the elements which have class progressbar in the javascript section of the page

Hope this help

7

After fiddling around with some solutions, based on the answers here, I've ended up with this one:

Html:

<div id="progress"><span class="caption">Loading...please wait</span></div>

JS:

$("#progress").children('span.caption').html(percentage + '%');

(To be called inside the function that updates the progressbar value)

CSS:

#progress {
  height: 18px;
}

#progress .ui-progressbar {
  position: relative;
}

#progress .ui-progressbar-value {
  margin-top: -20px;
}

#progress span.caption {
  display: block;
  position: static;
  text-align: center;
}

Advantages:

  • Caption is centered with no harcoded positioning (necessary if caption width changes dinamically)
  • No JS strange manipulation
  • Simple and minimal CSS
2

This solution allows for a flexible width based on the text as well as centering the text, styling the text, etc. Works in Chrome, FF, IE8, and IE8 in compatibility mode. Didn't test IE6.

Html:

 <div class="progress"><span>70%</span></div>

Script:

$(".progress").each(function() {
    $(this).progressbar({
        value: 70
    }).children("span").appendTo(this);
});

CSS:

.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}​

Working sample: http://jsfiddle.net/hasYK/

0

I used this:

<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>
0
    <style>
        #progress {
            height: 18px;
        }

        #progress .ui-progressbar {
            position: relative;
        }

        #progress .ui-progressbar-value {
            margin-top: -20px;
        }

        #progress span.caption {
            display: block;
            position: static;
            text-align: center;
        }

    </style>
</head>
<body>
    test
    <div id="progressbar"></div>
    <br>
    test2
    <div id="progressbar2"></div>

    <script>
        $("#progressbar").progressbar({
            max : 1024,
            value : 10
        });

        $("#progressbar2").progressbar({
            value : 50
        });

        $(document).ready(function() {
            $("#progressbar ").children('div.ui-progressbar-value').html('10');
            $("#progressbar2 ").children('div.ui-progressbar-value').html('50%');

        });

    </script>

</body>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.