Bulma es un marco CSS de código abierto que proporciona componentes prediseñados que se pueden combinar para crear sitios web y aplicaciones web receptivos. En este artículo, veremos cómo hacer barras de progreso de colores en Bulma.
Clases de color de la barra de progreso de Bulma:
- is-white: Esta clase se usa para cambiar el color de la barra de progreso al color blanco definido en Bulma $colors Sass Map .
- is-black: Esta clase se usa para cambiar el color de la barra de progreso al color negro definido en Bulma $colors Sass Map .
- is-light: Esta clase se usa para cambiar el color de la barra de progreso al color claro definido en Bulma $colors Sass Map.
- is-dark: Esta clase se usa para cambiar el color de la barra de progreso al color oscuro definido en Bulma $colors Sass Map.
- is-primary: Esta clase se usa para cambiar el color de la barra de progreso al color primario definido en Bulma $colors Sass Map.
- is-link: Esta clase se usa para cambiar el color de la barra de progreso al color del enlace definido en Bulma $colors Sass Map.
- is-info: Esta clase se usa para cambiar el color de la barra de progreso al color de información definido en Bulma $colors Sass Map.
- is-success: Esta clase se usa para cambiar el color de la barra de progreso al color de éxito definido en Bulma $colors Sass Map.
- is-warning: Esta clase se usa para cambiar el color de la barra de progreso al color de advertencia definido en Bulma $colors Sass Map.
- is-danger: Esta clase se usa para cambiar el color de la barra de progreso al color de peligro definido en Bulma $colors Sass Map.
Para hacer barras de progreso de colores en Bulma, puede agregar clases de color de la barra de progreso de Bulma al elemento de la barra de progreso.
Sintaxis:
<progress class="progress Bulma-Progress-Bar-Color-Class"
value=".." max="..">
...
</progress>
El siguiente ejemplo ilustra los colores de las barras de progreso de Bulma:
Ejemplo: El siguiente ejemplo ilustra cómo cambiar el color de la barra de progreso usando las clases de color de la barra de progreso de Bulma.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Coloured Progress Bars</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b>Bulma Coloured Progress Bars</b> <div class="container is-fluid mt-5"> <progress class="progress is-white" value="20" max="100"> </progress> <progress class="progress is-black" value="25" max="100"> </progress> <progress class="progress is-light" value="30" max="100"> </progress> <progress class="progress is-dark" value="35" max="100"> </progress> <progress class="progress is-primary" value="40" max="100"> </progress> <progress class="progress is-link" value="45" max="100"> </progress> <progress class="progress is-info" value="50" max="100"> </progress> <progress class="progress is-success" value="55" max="100"> </progress> <progress class="progress is-warning" value="60" max="100"> </progress> <progress class="progress is-danger" value="65" max="100"> </progress> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/elements/progress/#colors