Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox . Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo.
En este artículo, aprenderemos cómo incluir las variables de la barra de progreso en su página web. Otra ventaja con Bulma es que simplemente necesita tener conocimientos de HTML y CSS para implementar este marco (aunque saber JavaScript puede ayudar a las características existentes según sus necesidades). Bulma también nos permite agregar nuestro propio estilo CSS, pero se recomienda usar una hoja de estilo externa sobre el estilo en línea.
Barras de progreso: Se utiliza para mostrar el progreso de un proceso y nos ayuda a visualizar cuánto del proceso está completo y cuánto queda. Para esto, el porcentaje se usa para mostrar la cantidad de finalización.
Sintaxis:
<progress>...</progress>
Variables de la barra de progreso de Bulma:
- progreso-bar-fondo-color: Esta variable se utiliza para definir el color del borde de la barra de progreso.
- progreso-valor-fondo-color: Esta variable se utiliza para establecer el color del progreso.
- Progress-border-radius: esta variable se utiliza para definir el radio del borde de la barra de progreso.
- progreso-indeterminado-duración: esta variable se utiliza para establecer la duración del tiempo que la barra de progreso tardará en alcanzar el valor objetivo.
- progreso-colores: Esta variable se utiliza para establecer el color del texto de la barra de progreso.
El número de elementos en la etiqueta de progreso se enumera a continuación:
- clase: Este atributo se utiliza para la selección de ese elemento en particular.
- valor: este atributo se utiliza para definir el valor.
- max: este atributo se utiliza para definir el valor máximo.
Ejemplo: El siguiente código demuestra las variables de la barra de progreso de Bulma.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> </head> <body> <h1 class="has-text-success is-size-1"> GeeksforGeeks</h1> <strong>Progress Bar Variables</strong> <br> <progress class="progress is-success" value="60" max="100"> 60% </progress> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra las variables de la barra de progreso is-success, is-info y is-danger de Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content=
"width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<style>
body{
margin:20px;
}
</style>
</head>
<body>
<h1 class="has-text-success
is-size-1"> GeeksforGeeks</h1>
<h6 class="has-text-success
is-size-0"> Different types of progress bar</h6>
<strong>is-success</strong>
<br>
<progress class="progress is-success"
value="60"
max="100">
60%
</progress>
<strong>is-danger</strong>
<br>
<progress class="progress is-danger"
value="60"
max="100">
60%
</progress>
<strong>is-info</strong>
<br>
<progress class="progress is-info"
value="60"
max="100">
60%
</progress>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/elements/progress/#variables
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA