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.
Se puede usar una barra de progreso para mostrar el progreso de finalización de una tarea, usando diferentes colores, como verde para éxito, amarillo para advertencia, rojo para alerta y muchos más.
Clases de color de la barra de progreso de Foundation CSS :
- advertencia : clase de advertencia es una clase que se utiliza para indicar una notificación que podría necesitar atención.
- éxito : clase de éxito es una clase que se utiliza para indicar una acción exitosa o positiva.
- alerta : clase de alerta es una clase que se utiliza para indicar una acción peligrosa o potencialmente negativa.
- secundario : Es una clase que se puede utilizar para indicar la acción a realizar, pero no es necesario.
Sintaxis:
<div class="Progress-Bar-Color-Classes progress"
role="progressbar">
...
</div>
Ejemplo : este ejemplo ilustra el color de la barra de progreso en Foundation CSS.
HTML
<html>
<head>
<title>Foundation CSS Progress Bar Color</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h2>Progress Bar</h2>
<div class="warning progress"
role="progressbar"
tabindex="0"
aria-valuenow="25"
aria-valuemin="0"
aria-valuetext="25 percent"
aria-valuemax="100">
<div class="progress-meter"
style="width: 25%">
</div>
</div>
<div class="alert progress">
<div class="progress-meter"
style="width: 50%">
</div>
</div>
<div class="success progress">
<div class="progress-meter"
style="width: 75%">
</div>
</div>
</body>
</html>
Producción:
Color de la barra de progreso de CSS básico
Referencia : https://get.foundation/sites/docs/progress-bar.html#colors
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA