jQWidgets jqxProgressBar showText Property

Last Updated : 02 Sep, 2021

Introduction: jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxProgressBar is used to represent a jQuery progress bar widget that visually indicates the progress of a lengthy operation.

The showText property is used to set or return the visibility of the progress bar in percentage text. It accepts Boolean type value and its default value is false.

Syntax:

Set the showText property.

$('selector').jqxProgressBar({ showText: Boolean });

Return the showText property.

var showText = $('selector').jqxProgressBar('showText');

Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />

<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxprogressbar.js”></script>

Example: The below example illustrates the jqxProgressBar showText property in jQWidgets.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
        "jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <script type="text/javascript" 
        src="scripts/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqx-all.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqxcore.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqxprogressbar.js"></script> 
  
    <style> 
        h1, 
        h3 { 
            text-align: center; 
        } 
          
        #jqxPB { 
            margin-left: 40%; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        jQWidgets jqxProgressBar showText Property 
    </h3> 
  
    <div id='jqxPB'></div> 
  
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $("#jqxPB").jqxProgressBar({ 
                value: 60, 
                width: 250, 
                height: 30, 
                showText: true 
            }); 
        }); 
    </script> 
</body> 
  
</html>