Jquery UI progressbar() Method

Date Published: 08/05/2020Published By: JaiSchool

To design a progress-bar in Jquery UI, create a div element <div id="con"></div>, and select this in Jquery then apply progressbar() method.

This div contains another div element to write text in the progress bar <div id="con"><div id="label">Text</div></div>. But in this case, you need to make position:relative for the #con div (inspect & check for its hidden class) and position:absolute for #label div to make a relation between them.

See example:-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Progressbar()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
  	.label{
  		position:absolute;
  		top:5px;
  		left:40{084fae9a6ee6da5a140e203e4160c172c943a2d77bb1f312784b18f1e0e553dc};
  		font-weight:bold;
  		text-shadow:1px 1px 0px #ccc;
  	}
  	.ui-progressbar{
  		position:relative;
  		width:80{084fae9a6ee6da5a140e203e4160c172c943a2d77bb1f312784b18f1e0e553dc};
  	}

  </style>
</head>
<body>
	
<div class="con">
	<div class="label">Downloading...</div>
</div>

<script>
	$(document).ready(function(){
		var mainbox=$(".con");
		var label=$(".label");
		mainbox.progressbar();
	});

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

Options of progressbar()

OptionValue
value20

value Option

If you give 50 in its value then you see it is progressed 50{084fae9a6ee6da5a140e203e4160c172c943a2d77bb1f312784b18f1e0e553dc}.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Progressbar()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
  	.label{
  		position:absolute;
  		top:5px;
  		left:40{084fae9a6ee6da5a140e203e4160c172c943a2d77bb1f312784b18f1e0e553dc};
  		font-weight:bold;
  		text-shadow:1px 1px 0px #ccc;
  	}
  	.ui-progressbar{
  		position:relative;
  		width:80{084fae9a6ee6da5a140e203e4160c172c943a2d77bb1f312784b18f1e0e553dc};
  	}

  </style>
</head>
<body>
	
<div class="con">
	<div class="label">Downloading...</div>
</div>

<script>
	$(document).ready(function(){
		var mainbox=$(".con");
		var label=$(".label");
		mainbox.progressbar({
			value:35,
		});
	});

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

Events of progressbar()

  • change event
  • complete event

change Event

Code in the change event's function executes when the value of the progress bar changes.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Progressbar()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    .ui-progressbar{
      position:relative;
      width:800px;
    }

    #label{
      position:absolute;
      top:5px;
      left:40{084fae9a6ee6da5a140e203e4160c172c943a2d77bb1f312784b18f1e0e553dc};
      font-weight:bold;
      text-shadow:1px 1px 0px #ccc;
    }
  </style>
</head>
<body>
  
<div id="con">
  <div id="label">Downloading...</div>
</div>

<script>
  $(document).ready(function(){
    var mainbox=$("#con");
    var label=$("#label");
    mainbox.progressbar({
      value:false,
      change:function(){
        alert();
      },
    });

    function anim(){
      var val=mainbox.progressbar("value")||0;
      mainbox.progressbar("value",val+2);
      if(val<99)
      {
        setTimeout(anim,80);
      }
    }
    setTimeout(anim,2000);
  });

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

complete Event

Execute when the progress bar has its maximum value.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Progressbar()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    .ui-progressbar{
      position:relative;
      width:800px;
    }

    #label{
      position:absolute;
      top:5px;
      left:40{084fae9a6ee6da5a140e203e4160c172c943a2d77bb1f312784b18f1e0e553dc};
      font-weight:bold;
      text-shadow:1px 1px 0px #ccc;
    }
  </style>
</head>
<body>
  
<div id="con">
  <div id="label">Downloading...</div>
</div>

<script>
  $(document).ready(function(){
    var mainbox=$("#con");
    var label=$("#label");
    mainbox.progressbar({
      value:false,
      complete:function(){
        alert("Progressbar has reached to its max value.");
      },
    });

    function anim(){
      var val=mainbox.progressbar("value")||0;
      mainbox.progressbar("value",val+2);
      if(val<99)
      {
        setTimeout(anim,80);
      }
    }
    setTimeout(anim,2000);
  });

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

Advanced Progressbar

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Progressbar()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
  	.ui-progressbar{
  		position:relative;
  		width:800px;
  	}

  	#label{
  		position:absolute;
  		top:5px;
  		left:40{084fae9a6ee6da5a140e203e4160c172c943a2d77bb1f312784b18f1e0e553dc};
  		font-weight:bold;
  		text-shadow:1px 1px 0px #ccc;
  	}
  </style>
</head>
<body>
	
<div id="con">
	<div id="label">Downloading...</div>
</div>

<script>
	$(document).ready(function(){
		var mainbox=$("#con");
		var label=$("#label");
		mainbox.progressbar({
			value:false,
			change:function(){
				label.text("Downloading Content: "+mainbox.progressbar("value")+"{084fae9a6ee6da5a140e203e4160c172c943a2d77bb1f312784b18f1e0e553dc}");
			},
			complete:function(){
				label.text("Downloading Complete!!!");
			},
		});

		function anim(){
			var val=mainbox.progressbar("value")||0;
			mainbox.progressbar("value",val+2);
			if(val<99)
			{
				setTimeout(anim,80);
			}
		}
		setTimeout(anim,2000);
	});

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

Official documentation - https://api.jqueryui.com/progressbar/

Publish A Comment

Leave a Reply

Your email address will not be published.