¿Cómo crear una barra de progreso usando HTML y CSS?

La barra de progreso es un elemento importante en la web, la barra de progreso se puede utilizar para descargas, notas obtenidas, unidad de medida de habilidades, etc. Para crear una barra de progreso podemos utilizar HTML y CSS . Para que la barra de progreso responda, necesitará JavaScript .

¿Cómo crear una barra de progreso usando JavaScript?

En este artículo, aprenderemos a crear barras de progreso usando HTML y CSS. Una barra de progreso se crea utilizando dos «div» HTML, el contenedor (div principal) y la habilidad (div secundario) como se muestra en los siguientes ejemplos.

Ejemplo 1: dividiremos el artículo en dos secciones de codificación, en la primera sección trabajaremos en HTML y en la segunda sección diseñaremos esa barra de progreso.

Código HTML: creamos un div principal que definirá la unidad de longitud completa y el div secundario definirá la unidad de obtención.

<!DOCTYPE html>
<html>
<head>
    <title>Design a Progress bar</title>
</head>
<body>
    <h1>My Skills</h1>
    <p>HTML</p>
    <div class="container">
        <div class="skill html">80%</div>
    </div>
  
    <p>PHP</p>
    <div class="container">
        <div class="skill php">60%</div>
    </div>
</body>
  
</html>

Código CSS: Usando CSS decoraremos tanto el div, colorearemos el completo y obtendremos la unidad. Establezca la longitud de los divs también.

<style>
    p {
        font-size: 20px;
    }
  
    .container {
        background-color: rgb(192, 192, 192);
        width: 80%;
        border-radius: 15px;
    }
  
    .skill {
        background-color: rgb(116, 194, 92);
        color: white;
        padding: 1%;
        text-align: right;
        font-size: 20px;
        border-radius: 15px;
    }
  
    .html {
        width: 80%;
    }
  
    .php {
        width: 60%;
    }
</style>

Código final: aquí combinaremos las dos secciones de codificación anteriores.

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            font-size: 20px;
        }
      
        .container {
            background-color: rgb(192, 192, 192);
            width: 80%;
                border-radius: 15px;
        }
      
        .skill {
            background-color: rgb(116, 194, 92);
            color: white;
            padding: 1%;
            text-align: right;
            font-size: 20px;
                border-radius: 15px;
        }
      
        .html {
            width: 80%;
        }
      
        .php {
            width: 60%;
        }
    </style>
</head>
<body>
    <h1>My Skills</h1>
    <p>HTML</p>
    <div class="container">
        <div class="skill html">80%</div>
    </div>
  
    <p>PHP</p>
    <div class="container">
        <div class="skill php">60%</div>
    </div>
</body>
</html>

Producción:

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta