Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

Creating Progress bar Widget

Notes:

jQuery UI - Progress bar Widget :

Progress bar Widget: represents the current status of a process / task in percentage

Creating Progress bar Widget:

1. Create a new HTML document with basic HTML document structure code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Progress bar Demo</title>
</head>
<body>
</body>
</html>

2. Link the necessary jQueryUI libray files to the HTML document

<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>

3. Code the structure of the widget (i.e. HTML or markup):

To create a progressbar widget; we need to create a an empty div element
<div id="progressbar"> </div>

4. Select the element using jQuery and call the respective jQuery UI function on it

Select the element using jQuery selector, call progressbar jQuery UI function on it, and pass the value in percentage.
<script type="text/javascript">
$("#progressbar").progressbar({value:50});
</script>

Example Code:
<div id="container">
<div id="htmlHeading">HTML</div>
<div id="htmlProgressbar"></div>
<div id="cssHeading">CSS</div>
<div id="cssProgressbar"></div>
</div>

<script type="text/javascript">
$("#container").css({"backgroundColor":"lightblue","padding":"5%"});
$("#htmlProgressbar").progressbar({value:90});
$("#cssProgressbar").progressbar({value:70});
</script>

Interview Questions: