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
Barra de progreso de Foundation CSS con clases de texto:
- progreso: esta clase debe aplicarse a un contenedor. Contiene todos los elementos de la barra de progreso.
- progreso-medidor: Esta clase muestra el progreso actual. El progreso actual depende del ancho del elemento.
- progreso-medidor-texto: Esta clase muestra el valor del progreso actual.
Atributos de clase de la barra de progreso de CSS de Foundation:
- aria-valuemin: El valor mínimo que puede tomar la barra de progreso.
- aria-valuemax: El valor máximo que puede tomar la barra de progreso.
- aria-valuenow: El valor actual de la barra de progreso.
- aria-valuetext: Indica la versión legible por humanos de la barra de progreso, en caso de que el valor de la barra de progreso no sea numérico.
Sintaxis:
<div class="progress" role="progressbar">
<span class="progress-meter">
<span class="progress-meter-text">Percentage</span>
</span>
</div>
Ejemplo 1: ejemplo básico que ilustra una barra de progreso con texto en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Progress Bar with Text</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <title> Foundation CSS Progress Bar with Text </title> </head> <body class="grid-container"> <h2>GeeksforGeeks</h2> <h4>Foundation CSS Progress Bar with Text </h4> <div class="success progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100" style="margin-top: 50px;"> <span class="progress-meter" style="width: 50%"> <span class="progress-meter-text">50%</span> </span> </div> </body> </html>
Producción:
Una barra de progreso básica con texto
Ejemplo 2: Este ejemplo describe la barra de progreso animada con texto en Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Progress Bar with Text</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>
<title>Foundation CSS Progress Bar with Text</title>
</head>
<body class="grid-container">
<h2>GeeksforGeeks</h2>
<h4>Foundation CSS Animated Progress Bar with Text </h4>
<div class="success progress"
role="progressbar"
aria-valuenow="50"
aria-valuemin="0"
aria-valuetext="50 percent"
aria-valuemax="100">
<span class="progress-meter" style="width: 50%">
<span class="progress-meter-text">50%</span>
</span>
</div>
<script>
const recur = () => {
let value = 0;
const progressBar = document.querySelector(".progress");
const progressMeter = document.querySelector(".progress-meter");
const progressText = document.querySelector(".progress-meter-text");
setInterval(() => {
progressBar.ariaValueNow = value;
progressBar.ariaValueText = value + "percent";
progressMeter.style.width = value + "%";
progressText.innerHTML = value + "%";
value = (value + 1) % 100;
console.log(value)
}, 50)
}
recur();
</script>
</body>
</html>
Producción:
Una barra de progreso animada con texto
Referencias: https://get.foundation/sites/docs/progress-bar.html#with-text
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA