jQWidgets jqxProgressBar value 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 progressbar widget that visually indicates the progress of a lengthy operation.

The value property is used to set or return the value of progress bar. The value of progress bar should be inbetween min(default value: 0) and max(default value: 100). It accepts Number type value and its default value is 0.

Syntax:

Set the value property.

$('selector').jqxProgressBar({ value: Number });

Return the value property.

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

Linked Files: Download jQWidgets from the link https://www.jqwidgets.com/download/. 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>

The below example illustrates the jqxProgressBar value property in jQWidgets.

Example:

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 value Property 
    </h3> 
  
    <div id='jqxPB'></div> 
  
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $("#jqxPB").jqxProgressBar({ 
                width: 250, 
                height: 30, 
                value: 60, 
                showText: true 
            }); 
        }); 
    </script> 
</body> 
  
</html>