Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y Javascript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo.
Kitchen Sink tiene los elementos para trabajar en sitios web y aplicaciones. La barra de progreso del fregadero de cocina se usa para mostrar el progreso usando la barra. Tiene dos clases, a saber, progreso y medidor de progreso .
Clases usadas:
- progreso: Se utiliza para crear la barra de progreso.
- progreso-metro: Se utiliza para mostrar el metro llenando la barra.
- progreso-medidor-texto : Se utiliza para mostrar el texto en la barra de progreso.
Sintaxis:
<div class="primary progress">
...
</div>
Ejemplo 1: El siguiente ejemplo ilustra el uso de la barra de progreso del fregadero de cocina usando la clase primaria .
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script crossorigin="anonymous" src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Foundation CSS Kitchen Sink Progress bar </h3> <strong> Primary progress bar: </strong> <div class="primary progress"> <div class="progress-meter" style="width: 45%"> <p class="progress-meter-text">45%</p> </div> </div> <div class="primary progress"> <div class="progress-meter" style="width: 85%"> <p class="progress-meter-text">85%</p> </div> </div> <div class="primary progress"> <div class="progress-meter" style="width: 60%"> <p class="progress-meter-text">60%</p> </div> </div> </body> </html>
Producción:
Barra de progreso para fregadero de cocina CSS.
Ejemplo 2: El siguiente ejemplo ilustra el uso de la barra de progreso del fregadero de la cocina usando clases primarias, de advertencia, de alerta y de éxito .
HTML
<!DOCTYPE html> <html> <head> <link crossorigin="anonymous" rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script crossorigin="anonymous" src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Foundation CSS Kitchen Sink Progress bar </h3> <strong>Primary progress bar:</strong> <div class="primary progress"> <div class="progress-meter" style="width: 56%"> <p class="progress-meter-text">56%</p> </div> </div> <strong>Warning progress bar:</strong> <div class="warning progress"> <div class="progress-meter" style="width: 25%"> <p class="progress-meter-text">25%</p> </div> </div> <strong>Alert progress bar:</strong> <div class="alert progress"> <div class="progress-meter" style="width: 18%"> <p class="progress-meter-text">18%</p> </div> </div> <strong>Success progress bar:</strong> <div class="success progress"> <div class="progress-meter" style="width: 96%"> <p class="progress-meter-text">96%</p> </div> </div> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#progress-bar
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA