Bulma es un marco CSS gratuito y de código abierto que se envía con componentes y elementos prefabricados. Hace que el desarrollo de sitios web sea muy rápido, ya que no tiene que diseñar todo desde cero. En este artículo, veremos cómo hacer una barra de progreso indeterminada con Bulma.
Las barras de progreso en Bulma son solo barras de progreso nativas de HTML5 que se diseñan con CSS. Para hacer una barra de progreso indeterminada en Bulma, no se debe proporcionar el atributo de valor del elemento <progress> .
Sintaxis:
<progress class="progress is-link" max="100">10%</progress>
Nota: en la sintaxis anterior, no se proporciona el atributo de valor del elemento <progress>
Ejemplo: El siguiente ejemplo muestra cómo hacer barras de progreso indeterminadas en Bulma.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Indeterminate 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 Indeterminate Progress Bars</b> <div class="container is-fluid mt-5"> <progress class="progress is-link" max="100"> </progress> <progress class="progress is-primary" max="100"> </progress> <progress class="progress is-secondary" max="100"> </progress> </div> </body> </html>
Producción:
Barra de progreso de Bulma indeterminada
Referencia: https://bulma.io/documentation/elements/progress/#indeterminate