Complemento jQuery Image ProgressBars

En este artículo, aprenderemos cómo implementar la función ProgressBar de imagen usando el complemento jQuery Image ProgressBar .

Nota: descargue el complemento jQuery Image ProgressBar en la carpeta de trabajo e incluya los archivos necesarios en la sección principal de su código HTML.

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

Ejemplo: El siguiente ejemplo demuestra la funcionalidad básica del complemento Image ProgressBar utilizando las funciones jQuery createProgress() y getRandomNumber() . Estas funciones hacen uso del método SetPercentage() del complemento para establecer el porcentaje completo. Para obtener números aleatorios, se utilizan Math.ceil() y Math.floor() de JavaScript .
Se configura la imagen de fondo junto con la imagen seleccionada para la barra de progreso. La opción backgroundOpacity del complemento también se establece en la parte jQuery del código.

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 () {
            var 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) {
            var increment = getRandomNumber(0, 3);
            var 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>

Producción:

Publicación traducida automáticamente

Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *