<!DOCTYPE html>
<html>
<head>
<title>jQuery Image Progress bars</title>
<style>
html {
font-family: "Helvetica Neue",
Arial, sans-serif;
background-color: #e6e6e6;
}
</style>
<link rel="stylesheet"
type="text/css"
href="progressbar.css">
<script type="text/javascript"
src="jquery-3.3.1.min.js">
</script>
<script type="text/javascript"
src="jquery.progressbar.js">
</script>
</head>
<body>
<h2>jQuery Image Progressbar</h2>
<div id="imageDivID">
</div>
<script type="text/javascript">
$(document).ready(function () {
let myimage = $("#imageDivID").progressBar({
imageUrl: 'images/gfg2.jpg',
backgroundImageUrl: 'images/geeksimage.png',
imageHeight: 280,
imageWidth: 300,
backgroundOpacity: 0.5
});
createProgress(myimage, 0);
});
function createProgress(
imageProgressBar, currentVal) {
let increment = getRandomNumber(0, 3);
let newVal = currentVal + increment;
if (newVal > 100) newVal = 100;
if (currentVal == 100) newVal = 0;
imageProgressBar.SetPercentage(newVal);
setTimeout(function () {
createProgress(imageProgressBar, newVal);
}, 100);
}
function getRandomNumber(minVal, maxVal) {
min = Math.ceil(minVal);
max = Math.floor(maxVal);
return Math.floor(Math.random()
* (max - min + 1)) + min;
}
</script>
</body>
</html>