Las barras de progreso de Bulma se utilizan como un indicador que muestra el progreso de finalización de una tarea. Se muestra como una barra de progreso.
En este artículo, aprenderemos sobre los diferentes tamaños de barras de progreso.
Clases de tamaños de barra de progreso de Bulma:
- is-small: esta clase se usa para establecer el tamaño de la barra de progreso en pequeño.
- is-normal: esta clase se usa para establecer el tamaño de la barra de progreso en normal.
- is-medium: esta clase se utiliza para establecer el tamaño de la barra de progreso en medio.
- is-large: esta clase se usa para establecer el tamaño de la barra de progreso en grande.
Sintaxis:
<progress class="progress is-size" value="20" max="100"> .... </progress>
Ejemplo: El siguiente ejemplo muestra el uso de clases de tamaño de barra de progreso en Bulma.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Progress bar Size</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 Progress Bar Sizes</b> <div class="container"> <h5 class="title is-5">Small Size Progress Bar</h5> <progress class="progress is-small" value="20" max="100">20%</progress> <h5 class="title is-5">Normal Size Progress Bar</h5> <progress class="progress is-normal" value="40" max="100">40%</progress> <h5 class="title is-5">Medium Size Progress Bar</h5> <progress class="progress is-medium" value="60" max="100">60%</progress> <h5 class="title is-5">Small Progress Bar</h5> <progress class="progress is-medium" value="80" max="100">80%</progress> </div> </body> </html>
Producción:
Bulma Barras de Progreso Tallas
Enlace de referencia: https://bulma.io/documentation/elements/progress/#sizes
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA