jQuery UI Widgets › Forums › Editors › ProgressBar › progress bar with label

Tagged: ,

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

    yokinha
    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.