How to Create JQuery UI Progressbar Widget | Step by Step Guide

Jquery UI progressbar

In this article, we will see how to create a progressbar in jquery UI. The progress bar is one of the jquery UI widgets, it represents the current status of a process/task in percentage.

Step-by-step guide to creating progress bar

1. Create a new HTML document with basic HTML document structure code by linking jquery UI library files. If you haven’t jquery UI library files click here to see how to download Jquery UI files.

<!DOCTYPE html>
<html>
<head>
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

</head>
<body>
<script>

</script>
</body>
</html>

2. To create a progress bar widget, we need to create an empty div element.

<div id="progressbar"></div>

3. Select the element using the jquery selector and call the progress bar respective jQuery UI function on it and pass the value in percentage as in the below code.

<script type ="text/javascript">
$("#progressbar").progressbar({value:50});
</script>

Sample Code:

<html>
<head>
  <link  href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
  <script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>   
  <script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container" style="background-color: lightblue; padding: 20px;">
	HTML<div id="html"></div><br>
    CSS<div id="css"></div><br>
    JavaScript<div id="JS"></div><br>
</div>

<script type ="text/javascript">
           $("#html").progressbar({value:80});  
           $("#css").progressbar({value:60}); 
           $("#JS").progressbar({value:40}); 
</script>
</body>
</html>

Output:

jquery ui progressbar

Leave a Reply