A Foundation 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.
La barra de progreso de Foundation CSS nos brinda una solución simple para agregar un elemento de progreso a nuestra página web. Nos ayuda a mostrar el progreso de un proceso o cuánto queda aún. Podemos usar las clases Foundation CSS para crear una barra de progreso muy fácilmente. Se compone principalmente de dos clases, una es la clase de progreso que se usa para crear el contenedor de progreso y la otra es el medidor de progreso que se usa para crear la barra de progreso. El estado de la barra de progreso se describe mediante el rol y los atributos aria .
La siguiente lista aclara los objetivos de los atributos:
- aria-valuemin: Denota el valor mínimo para la barra de progreso.
- aria-valuemax: Denota el valor máximo para la barra de progreso.
- aria-valuenow: Indica el valor de la barra de progreso.
- aria-valuetext: proporciona un valor numérico legible de la barra de progreso.
Sintaxis:
<div class="progress" role="progressbar" aria-valuenow="value"
aria-valuemin="value" aria-valuemax="value">
<div class="progress-meter"></div>
</div>
Ejemplo 1: a continuación se muestra la demostración de una barra de progreso simple.
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"/> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"/> <title>Foundation CSS Progress Bar Screen Reader</title> </head> <body> <h1 class="text-center" style="color:#009900">GeeksforGeeks</h1> <h3 class="text-center">Foundation CSS Progress Bar Screen Reader</h3> <div class="progress margin-2" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100"> <div class="progress-meter" style="width:50%"></div> </div> <pre class="text-center"> This is a simple progress bar with 50% value. </pre> </body> </html>
Producción:
Ejemplo 2: este código demuestra los usos de diferentes clases de colores para tener barras de progreso coloreadas.
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"/> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"/> <title>Foundation CSS Progress Bar Screen Reader</title> </head> <body> <h1 class="text-center" style="color:#009900">GeeksforGeeks</h1> <h3 class="text-center">Foundation CSS Progress Bar Screen Reader</h3> <div class="secondary progress margin-2" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100"> <div class="progress-meter" style="width:25%"></div> </div> <div class="success progress margin-2"> <div class="progress-meter" style="width:50%"></div> </div> <div class="warning progress margin-2"> <div class="progress-meter" style="width:50%"></div> </div> <div class="alert progress margin-2"> <div class="progress-meter" style="width:75%"></div> </div> <pre class="text-center"> Usage of different classes to have colored progress bars. </pre> </body> </html>
Producción:
Ejemplo 3: Este ejemplo muestra cómo agregar texto a una barra de progreso, podemos hacerlo agregando el texto en la etiqueta span con la clase Progress-Meter-Text.
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"/> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"/> <title>Foundation CSS Progress Bar Screen Reader</title> </head> <body> <h1 class="text-center" style="color: #009900">GeeksforGeeks</h1> <h3 class="text-center">Foundation CSS Progress Bar Screen Reader</h3> <div class="progress margin-2" role="progressbar" aria-valuenow="25" 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> <pre class="text-center"> 50% progress bar </pre> </body> </html>
Producción:
Ejemplo 4: también podemos usar el elemento nativo <progress> para crear una barra de progreso personalizada. Es una forma breve de crear una barra de progreso, pero no es compatible con Internet Explorer 9 u otros navegadores más antiguos.
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"/> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"/> <title>Foundation CSS Progress Bar Screen Reader</title> </head> <body> <h1 class="text-center" style="color:#009900">GeeksforGeeks</h1> <h3 class="text-center">Foundation CSS Progress Bar Screen Reader</h3> <progress class="width-100" max="100" value="75" style="height:3em"> </progress> <pre class="text-center"> Using native Progress element to make a progress bar. </pre> </body> </html>
Producción:
Ejemplo 5: También podemos agregar las clases de color al elemento de progreso para hacer un elemento colorido con este elemento.
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"/> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"/> <title>Foundation CSS Progress Bar Screen Reader</title> </head> <body> <h1 class="text-center" style="color: #009900">GeeksforGeeks</h1> <h3 class="text-center">Foundation CSS Progress Bar Screen Reader</h3> <meter class="width-100" value="30" min="0" low="33" high="66" optimum="100" max="100" style="height:3em"> </meter> <meter class="width-100" value="50" min="0" low="33" high="66" optimum="100" max="100" style="height:3em"> </meter> <meter class="width-100" value="100" min="0" low="33" high="66" optimum="100" max="100" style="height:3em"> </meter> <pre class="text-center"> Using meter element to make a progress bar. </pre> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/progress-bar.html
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA