Open In App

jQuery Image ProgressBars Plugin

Improve
Improve
Like Article
Like
Save
Share
Report

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.

html




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


Output:



Last Updated : 13 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads