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%;
font-weight:bold;
text-shadow:1px 1px 0px #ccc;
}
.ui-progressbar{
position:relative;
width:80%;
}
</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()
| Option | Value |
|---|---|
| value | 20 |
value Option
If you give 50 in its value then you see it is progressed 50%.
<!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%;
font-weight:bold;
text-shadow:1px 1px 0px #ccc;
}
.ui-progressbar{
position:relative;
width:80%;
}
</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%;
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%;
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%;
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")+"%");
},
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