<!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
>