Open In App

EasyUI jQuery progressbar widget

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to design a progress bar widget using the jQuery Easy UI progress bar. The component can be created from HTML markup or programmatically. EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

var a = $(".selector").progressbar({

});

Properties:

  • height: The height of the component
  • width: The width of the component
  • value: The percentage value
  • text: The text template to be displayed.

Methods:

  • resize: resizes the progress bar.
  • getValue: Return the current searching type name.
  • setValue: Set the current searching type name.
  • options: Return the options object

Event:

  • onChange: Fires when the value changes

CDN Links:

  • First, add jQuery Easy UI scripts needed for your project.

<script type=”text/javascript” src=”jquery.min.js”>
</script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript”  src=”jquery.easyui.min.js”>
</script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript”  src=”jquery.easyui.mobile.js”>
</script> 

Example:

HTML




<!doctype html> 
<html
  
<head
    <meta charset="UTF-8"
    <meta name="viewport" content="initial-scale=1.0, 
          maximum-scale=1.0, user-scalable=no"> 
              
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
          href="themes/metro/easyui.css"
  
    <link rel="stylesheet" type="text/css"
          href="themes/mobile.css"
  
    <link rel="stylesheet" type="text/css"
          href="themes/icon.css"
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js"
    </script
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
            src="jquery.easyui.min.js"
    </script
      
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
            src="jquery.easyui.mobile.js"
    </script
</head
  
<body>     
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI Progressbar Widget</h3>
    <div id="p" class="easyui-progressbar" 
                data-options="value:60" 
                style="width:400px;">
    </div>
</body>
</html>


Output:

Reference: http://www.jeasyui.com/documentation/



Last Updated : 12 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads