Open In App
Related Articles

jQuery Image ProgressBars Plugin

Improve Article
Save Article
Like Article

In this article, we will learn how to implement image ProgressBar feature using the jQuery Image ProgressBar plugin.

Note: Please download the jQuery Image ProgressBar plugin in the working folder and include the required files in the head section of your HTML code.

<link href=”progressbar.css” rel=”stylesheet” type=”text/css”/>
<script src=”jquery-3.3.1.min.js”></script> <script src=”jquery.progressbar.js”></script>

Example: The following example demonstrates the basic functionality of Image ProgressBar plugin using jQuery createProgress() and getRandomNumber() functions. These functions make use of the plugin’s SetPercentage() method for setting the percentage complete. For getting random numbers, JavaScript’s Math.ceil() and Math.floor() are used. The background image along with the image selected for the progress bar is set. The plugin’s option backgroundOpacity is also set in the jQuery part of the code.


<!DOCTYPE html>
    <title>jQuery Image Progress bars</title>
        html {
            font-family: "Helvetica Neue",
                Arial, sans-serif;
            background-color: #e6e6e6;
    <link rel="stylesheet"
    <script type="text/javascript"
    <script type="text/javascript"
    <h2>jQuery Image Progressbar</h2>
    <div id="imageDivID">
    <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;
            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;


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 13 Jul, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials