Primer CSS es un marco CSS gratuito de código abierto que se basa en el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de Github. Crea la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es un modelo altamente reutilizable.
Uno de esos componentes de Primer CSS es la barra de progreso . En este artículo, aprenderemos sobre el componente Barra de progreso en Primer CSS. La barra de progreso es un componente muy útil para mostrar el progreso de un usuario al completar una tarea en particular, como crear una cuenta, alcanzar un objetivo en particular o descargar o cargar el progreso. Se utiliza ampliamente en los sitios web modernos.
Podemos crear una barra de progreso usando Primer CSS agregando la clase «.Progress» al elemento y agregando el valor de progreso (en porcentaje) y el color de la barra de progreso dentro del elemento con la clase «.Progress -item».
Los diferentes componentes de Primer CSS Progress Bar se detallan a continuación:
- Progreso grande : podemos crear una barra de progreso grande en Primer CSS agregando la clase «.Progress–large» al elemento Progress. Hace que la altura de la barra de progreso sea un poco más grande que el valor predeterminado.
- Pequeño progreso: podemos crear una pequeña barra de progreso en Primer CSS agregando la clase «.Progress–small» al elemento Progress. Hace que la altura de la barra de progreso sea un poco más pequeña que el valor predeterminado.
- Progreso en línea : podemos crear una barra de progreso en línea en Primer CSS agregando las clases «.Progress» y «.d-inline-flex» dentro de un elemento en línea como span y luego necesitamos un ancho personalizado para la barra de progreso.
- Accesibilidad : en la barra de progreso de Primer CSS, podemos agregar el atributo « aria-label » para describir la barra de progreso donde no es posible describir la barra de progreso en el texto dentro del sitio web.
- Creación de una barra de progreso de valores múltiples : podemos crear fácilmente una barra de progreso de valores múltiples agregando varios elementos secundarios dentro del elemento de progreso y dándoles diferentes colores y diferentes valores de ancho que suman el 100%. Todos los niños están apilados de izquierda a derecha.
Sintaxis:
<span class="Progress">
<span class="Progress-item color-bg-success"
style="width=".."" >
</span>
</span>
Nota: Aquí hemos usado el color de fondo “.color-bg-success”, puede usar cualquier otro color de fondo de utilidades CSS de imprimación.
Ejemplo 1: Hemos creado 3 barras de progreso. El primero tiene el tamaño predeterminado, el segundo es más grande y el tercero es más pequeño.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> <title>Document</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h2>Primer CSS Progress Bar</h2> <div class="container" style="padding: 2em;"> <h2>First Progress Bar (Default Size)</h2> <span class="Progress"> <span class="Progress-item color-bg-success-emphasis" style="width: 30%;"> </span> </span> </div> <div class="container" style="padding: 2em;"> <h2>Second Progress Bar (Larger Size)</h2> <span class="Progress Progress--large"> <span class="Progress-item color-bg-success-emphasis" style="width: 40%;"> </span> </span> </div> <div class="container" style="padding: 2em;"> <h2>Third Progress Bar (Smaller Size)</h2> <span class="Progress Progress--small"> <span class="Progress-item color-bg-success-emphasis" style="width: 50%;"> </span> </span> </div> </body> </html>
Producción:
Ejemplo 2: Aquí hemos creado dos barras de progreso. La primera es una barra de progreso en línea, la segunda es una barra de progreso de varias líneas.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> <title>Document</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h2>Primer CSS Progress Bar</h2> <div class="container" style="padding: 2em;"> <span class="text-small color-fg-muted mr-2"> 10 of 16 </span> <span class="Progress d-inline-flex" style="width: 160px"> <span class="Progress-item color-bg-success-emphasis" style="width: 62.5%"> </span> </span> </div> <div class="container" style="padding: 2em;"> <h2>Second Progress Bar</h2> <span class="Progress Progress--large"> <span class="Progress-item color-bg-success-emphasis" style="width: 40%;"> </span> <span class="Progress-item color-bg-attention-emphasis" style="width: 30%;"> </span> <span class="Progress-item color-bg-danger-emphasis" style="width: 20%;"> </span> <span class="Progress-item color-bg-done-emphasis" style="width: 10%;"> </span> </span> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/progress
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA