jQuery UI Widgets Forums Editors ProgressBar progress bar with label

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • 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!!

    • This topic was modified 5 years, 11 months ago by  yokinha.
    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

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

You must be logged in to reply to this topic.