Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean 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 orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS ofrece varias barras de progreso, como grande, pequeña y en línea.
En este artículo, discutimos el gran progreso. El progreso grande es un poco más alto que el predeterminado.
Primer CSS Clase de progreso grande:
- Progreso–grande: esta clase se utiliza para crear una barra de progreso más grande que la predeterminada.
Sintaxis:
<span class="Progress Progress--large">
<span class="Progress-item color-bg-(color_name)-emphasis" >
...
</span>
</span>
Nota: color_name puede ser primario, correcto, alerta, advertencia, etc.
Ejemplo 1: Este ejemplo demuestra el uso de Primer CSS Large Progress utilizando las clases Progress–large y color-bg-success-emphasis .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Large Progress </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body style="margin-inline: 10rem;"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Large Progress </h3> </div> <span class="mt-5 Progress Progress--large"> <span class="Progress-item color-bg-success-emphasis" style="width: 30%;"> </span> </span> </body> </html>
Producción:
Cartilla CSS Gran Progreso
Ejemplo 2: Este es otro ejemplo que demuestra el uso de Primer CSS Gran progreso usando la clase Progress–large color-bg-danger-emphasis .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Large Progress </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body style="margin-inline: 10rem;"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Large Progress </h3> </div> <span class="mt-5 Progress Progress--large"> <span class="Progress-item color-bg-danger-emphasis" style="width: 50%;"> </span> </span> </body> </html>
Producción:
Cartilla CSS Gran Progreso
Referencia: https://primer.style/css/components/progress#large-progress