Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. 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.
La barra de progreso representa la finalización de una tarea. Es muy útil en sitios web para representar el progreso de un trabajo en particular. En Foundation CSS, además del estilo de barra de progreso personalizado, también podemos usar el elemento nativo <progress> .
Atributos de la barra de progreso de Foundation CSS:
- max : este atributo representa el porcentaje máximo de la barra de progreso.
- value: este atributo representa el porcentaje de finalización.
Sintaxis:
<progress ...></progress>
Ejemplo 1: este ejemplo ilustra la barra de progreso en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Progress Bar Native</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> </head> <body> <h2 style="color:green;">GeeksforGeeks </h2> <progress max="100" value="50"></progress> </body> </html>
Producción:
Fundación CSS Barra de progreso Nativa
Ejemplo 2 : este ejemplo ilustra la barra de progreso en Foundation CSS con diferentes atributos de valor.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Progress Bar Native</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<style>
/* For Firefox */
progress::-moz-progress-bar
{
background: green;
}
/* For Chrome or Safari */
progress::-webkit-progress-value {
background: green;
}
/* For IE10 */
progress {
background: green;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<label>25%</label>
<progress max="100" value="25"></progress>
<label>50%</label>
<progress max="100" value="50"></progress>
<label>75%</label>
<progress max="100" value="75"></progress>
<label>100%</label>
<progress max="100" value="100"></progress>
</body>
</html>
Producción:
Fundación CSS Barra de progreso Nativa
Referencia : https://get.foundation/sites/docs/progress-bar.html