Barra de progreso CSS básica

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles. 

Una barra de progreso se utiliza para mostrar el progreso de un proceso. Una barra de progreso nos ayuda a visualizar cuánto del proceso está completo y cuánto queda. Podemos agregar una barra de progreso en una página web utilizando clases CSS de Foundation predefinidas. Para agregar una barra de progreso usando Foundation CSS, usamos la clase «progreso» para crear un contenedor de progreso y la clase «medidor de progreso» para crear una barra de progreso.

Sintaxis:  

<div class="progress">
    <div class="progress-meter" style="width:20%">
        ...
    </div>
</div>

Ejemplo: Este ejemplo ilustra una barra de progreso básica usando Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
      
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script>
</head>
  
<body>
    <center>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <strong>Foundation CSS Progress bar</strong><br/>
    </center> 
    <div class="progress">
        <div class="progress-meter" style="width: 50%"></div>
    </div>
    <div class="progress">
        <div class="progress-meter" style="width: 70%"></div>
    </div>
</body>
  
</html>

Producción:

Barra de progreso etiquetada: 

La barra de progreso etiquetada se usa para mostrar el texto dentro de la barra de progreso para mostrar el porcentaje de finalización de la tarea. Para agregar una etiqueta a la barra de progreso, usamos un elemento <span> con clase de texto de medidor de progreso .

Sintaxis:

<div class="progress">
    <div class="progress-meter" style="width:40%">
        <span class="progress-meter-text">
            ...
        </span>
    </div>
</div>

Ejemplo: este ejemplo ilustra una barra de progreso básica con etiquetas creadas con Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous">
    <!-- Compressed JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script>
</head>
  
<body>
    <center>
      <h1 style="color:green;">
          GeeksforGeeks
      </h1>
      <strong>Foundation CSS Progress bar</strong><br/>
    </center> 
    <div class="progress">
        <div class="progress-meter" style="width: 50%">
           <span class="progress-meter-text">50%</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-meter" style="width: 70%">
           <span class="progress-meter-text">70%</span>
        </div>
    </div>     
</body>
</html>

Producción:

Barras de progreso coloreadas: podemos usar clases de color contextuales de CSS base para establecer el color de la barra de progreso. El color predeterminado de la barra de progreso es azul. Los siguientes son los cinco tipos de clases de color disponibles en Foundation CSS.

  • primario
  • secundario
  • éxito
  • alerta
  • advertencia

Sintaxis:  

<div class="primary progress">
    <div class="progress-meter" style="width:30%">
        ...
    </div>
</div>

Ejemplo: El siguiente es un ejemplo que muestra todas las barras de progreso de color contextuales realizadas con Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>    
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script>
</head>
  
<body>
    <center>
      <h1 style="color:green;">
          GeeksforGeeks
      </h1>
      <strong>Foundation CSS Progress bar</strong><br/>
    </center> 
    <div class="primary progress">
        <div class="progress-meter" style="width: 50%">
            <span class="progress-meter-text">Primary</span>
        </div>
    </div>
    <div class="secondary progress">
        <div class="progress-meter" style="width: 70%">
            <span class="progress-meter-text">Secondary</span>
        </div>
    </div>
    <div class="success progress">
        <div class="progress-meter" style="width: 80%">
            <span class="progress-meter-text">Success</span>
        </div>
    </div>
    <div class="alert progress">
        <div class="progress-meter" style="width: 90%">
            <span class="progress-meter-text">Alert</span>
        </div>
    </div>
    <div class="warning progress">
        <div class="progress-meter" style="width: 100%">
            <span class="progress-meter-text">Warning</span>
        </div>
    </div>     
</body>
</html>

Producción:

Enlace de referencia: https://get.foundation/sites/docs/progress-bar.html

Publicación traducida automáticamente

Artículo escrito por mishrapriyank17 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 *