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 el progreso en línea. El progreso en línea se puede realizar utilizando las clases de progreso y d-inline-flex junto con un elemento en línea como span, button, etc.
Primer CSS Clase de progreso grande:
- Progreso: esta clase se utiliza para definir un elemento como progreso.
- d-inline-flex: esta clase se utiliza para definir el contenedor flexbox en línea.
Sintaxis:
<span class="Progress d-inline-flex" style="width: ...">
<span class="Progress-item
color-bg-success-emphasis"
style="width: ...%">
</span>
</span>
Ejemplo 1: Este ejemplo demuestra el uso de Primer CSS Inline Progress usando las clases Progress y d-inline-progress .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Inline Progress </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Inline Progress </h3> <span class="Progress d-inline-flex mt-5" style="width: 200px"> <span class="Progress-item color-bg-success-emphasis" style="width: 25%"> </span> </span> </center> </body> </html>
Producción:
Primer CSS Progreso en línea
Ejemplo 2: Este es otro ejemplo que demuestra el uso de Primer CSS Inline Progress utilizando las clases Progress y d-inline-progress .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Inline Progress </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Inline Progress </h3> <span class="Progress d-inline-flex mt-5" style="width: 200px"> <span class="Progress-item color-bg-danger-emphasis" style="width: 25%"> </span> </span> </center> </body> </html>
Producción:
Primer CSS Progreso en línea
Referencia: https://primer.style/css/components/progress#inline-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