jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Mariya 11 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

progress bar with label Posts

October 25, 2013 at 1:57 pm progress bar with label #31338

Member

Hi, I’m using a vertical progress bar and I’d like to know how can I use a text inside my progress bar box. I’d like to show % value inside.

my div is:

        <div style='margin-top: 10px;overflow: hidden;text-align:center'>
     		80%
        </div>

I’ve tried to write a value inside, but, when I use a 100% value, the box isn’t filled until the end.
Any suggestions?

thanks!!

October 28, 2013 at 7:15 am progress bar with label #31410

Mariya

Participant

Hi yokinha,

In order to show a text in your progress bar, you can use the ‘showText’ property set to true. Here is an example that I hope it would work for you:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Progress, Progress Bar, jqxProgressBar, Loading Bar, Progress Widget" /> 
    <meta name="description" content="The jqxProgressBar widget visually indicates the progress of a lengthy operation" />
  
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxprogressbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxProgressBar.
            var theme = getDemoTheme();
           
            $("#jqxVerticalProgressBar").jqxProgressBar({ width: 30, height: 250, value: 50, orientation: 'vertical', theme: theme, showText: true });
         });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
     
        <div style='margin-top: 10px;'>Vertical</div>
        <div style='margin-top: 10px; overflow: hidden;' id='jqxVerticalProgressBar'>
     
        </div>
    </div>
</body>
</html>

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.