//////////////////////////// HTML
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
progress
{
-webkit-appearance: progress-bar;
background-color:
red;
box-sizing: border-box;
display: inline-block;
height: 30px;
width: 100%;
vertical-align: -0.25em;
}
.progressbar
{
border: 1px solid #aaaaaa;
height: 40px;
background: #f38282;
}
.ui-widget-header
{
border: 1px solid #aaaaaa;
background: #70c370 !important;
}
.ui-widget-content
{
border: 1px solid #aaaaaa;
background: #f38282 !important;
}
</style>
<input class="valIn"
value="1"
onkeyup="abc(event)"
/>
<br>
<br>
<div class="progressbar">
</div>
<br />
<br>
<span class="set">0</span> <span class="lessset">0</span>
//////////////// JQuery
<script type="text/javascript">
var x = 0;
function abc(e) {
if ((e.keyCode > 47 && e.keyCode < 57)
|| (e.keyCode == 8 || e.keyCode == 46)) {
var xvv = 500;
var x = parseInt($(".valIn").val());
var pr = (x * 100 / xvv)
$(".progressbar").progressbar({
value: pr
});
$(".set").text("Percentage : "+pr + "%");
var xt = (xvv - parseInt(x));
$(".lessset").text("Total in (500) : "+xt);
if (x == xvv) {
$(".lessset").text("Complete");
$(".lessset").css({ "background-color": "green", "color":
"#fff" });
}
else {
$(".lessset").css("background-color", "red");
}
}
}
</script>
Result////////////////////////