Bulma Progress Bar Indeterminate

Last Updated : 30 Jan, 2022

Bulma is a free and open-source CSS framework that ships with premade components and elements. It makes the development of websites very fast as you do not have to style everything from scratch. In this article, we will be seeing how to make an indeterminate progress bar with Bulma.

Progress bars in Bulma are just native progress bars of HTML5 which are styled using CSS. To make an indeterminate progress bar in Bulma, the value attribute of <progress> element shouldn’t be provided.

Syntax:

<progress class="progress is-link" max="100">10%</progress>

Note: In the syntax above the value attribute of <progress> element is not provided

Example: The example below shows how to make indeterminate progress bars in 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>