Primer CSS Progress con múltiples valores

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 orientado 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, Progreso con múltiples valores y en línea. En este artículo, discutiremos el progreso con múltiples valores. El progreso con múltiples valores se usa para indicar las tareas en diferentes etapas de progreso, como ‘terminado’, ‘en progreso’ o ‘abierto’.

Primer CSS Progress con clases de múltiples valores utilizados:

elemento de progreso: esta clase se utiliza para indicar un elemento de progreso.
color-bg-success-emphasis: esta clase se utiliza para resaltar la barra de progreso con color verde.
color-bg-attention-emphasis: esta clase se utiliza para resaltar la barra de progreso con color amarillo.
color-bg-danger-emphasis: esta clase se utiliza para resaltar la barra de progreso con color rojo.
color-bg-accent-emphasis: esta clase se utiliza para resaltar la barra de progreso con color azul.

Sintaxis:

<span class="Progress">
    <span class="Progress-item color-bg-success-emphasis" 
     style="width: ...;"></span>
     ...
</span>

Ejemplo 1: Este ejemplo demuestra el uso de Primer CSS Progress con múltiples valores.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Primer CSS Progress with multiple values
    </title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css">
</head>
  
<body>
    <center>
        <h1 class="color-fg-open">
            GeeksforGeeks
        </h1>
          
        <h4>Primer CSS Progress with multiple values</h4>
  
        <span class="Progress mt-5" style="width: 40rem;">
            <span class="Progress-item color-bg-success-emphasis"
                style="width: 70%;">
            </span>
            <span class="Progress-item color-bg-attention-emphasis"
                style="width: 30%;">
            </span>
        </span>
    </center>
</body>
  
</html>

Producción:

Primer CSS Progress con múltiples valores

Ejemplo 2: Este es otro ejemplo que demuestra el uso de Primer CSS Progress con múltiples valores.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Primer CSS Progress with multiple values
    </title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css">
</head>
  
<body>
    <center>
        <h1 class="color-fg-open">
            GeeksforGeeks
        </h1>
          
        <h4>Primer CSS Progress with multiple values</h4>
  
        <span class="Progress mt-5" style="width: 40rem;">
            <span class="Progress-item color-bg-danger-emphasis"
                style="width: 27%;">
            </span>
            <span class="Progress-item color-bg-accent-emphasis"
                style="width: 73%;">
            </span>
        </span>
    </center>
</body>
  
</html>

Producción:

Primer CSS Progress con múltiples valores

Referencia: https://primer.style/css/components/progress#progress-with-multiple-values

Publicación traducida automáticamente

Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta