Hi Everyone
I have been searching for this very long time but could not find any good steps / articles. Today I am able to successfully develop one and wanted to share as this could be beneficial to someone
First Create a Blank Application and enter the below code in the execute
?>
<head>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script type=‘text/javascript’>
function DisplayProgressBar(currentPercentage) {
$("#NNinnerDiv").animate({ “width”: (currentPercentage * 700) / 100 }, {
duration: 1000,
step: function (now, fx) {
$("#NNinnerDiv").text(Math.ceil((now / 700) * 100) + ’ %’);
}
});
}
</script>
</head>
<body style=‘font-family:Arial’>
<div id=‘NNouterDiv’ style=‘background-color:#EEEEEE; height:20px; width:700px; padding:5px’>
<div id=‘NNinnerDiv’ style=‘width:0px; height:19px; text-align:center; background-color:red; color:white’></div>
</div>
</body>
<?php
// The above code will declare the progress bar
// The below will call them first one will display 20% and second one will display 50% with animation.
echo "
<script>
DisplayProgressBar(20);
</script>";
echo "
<script>
DisplayProgressBar(50);
</script>";