jQuery UI Widgets Forums Editors ProgressBar progress bar with label

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • progress bar with label #31338


    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'>

    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?


    • This topic was modified 10 years, 7 months ago by  yokinha.
    progress bar with label #31410


    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">
    <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 });
    <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'>

    Best Wishes,

    jQWidgets Team

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

You must be logged in to reply to this topic.