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, discutiremos pequeños avances. La barra de progreso pequeña es un poco más pequeña que la barra de progreso predeterminada.
Primer CSS Clase de progreso pequeño:
- Progreso–pequeño: Esta clase se usa para crear una pequeña barra de progreso diferente a la predeterminada.
Sintaxis:
<span class="Progress Progress--small">
<span class="Progress-item
color-bg-color-name-emphasis" >
...
</span>
</span>
Nota: el nombre del color puede ser primario, correcto, alerta, advertencia, etc.
Ejemplo 1: Este ejemplo demuestra el uso de Primer CSS Small progress utilizando las clases Progress–small y color-bg-success-emphasis .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Small 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 Small Progress </h3> </div> <span class="mt-5 Progress Progress--small"> <span class="Progress-item color-bg-success-emphasis" style="width: 30%;"> </span> </span> </body> </html>
Producción:
Primer CSS Pequeño Progreso
Ejemplo 2: Este es otro ejemplo que demuestra el uso de Primer CSS Small Progress utilizando las clases Progress–small y color-bg-danger-emphasis .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Small 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 Small Progress </h3> </div> <span class="mt-5 Progress Progress--small"> <span class="Progress-item color-bg-danger-emphasis" style="width: 70%;"> </span> </span> </body> </html>
Producción:
Primer CSS Pequeño Progreso
Referencia: https://primer.style/css/components/progress#small-progress
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA