jQWidgets jqxProgressBar rtl 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 rtl property is used to set or return a value that indicates whether the Progress Bar widget elements are aligned to support locales using right-to-left fonts. It accepts Boolean type value and its default value is false.

Syntax:

Set the rtl property.

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

Return the rtl property.

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

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