Bulma progress bars are used as an indicator showing the completion progress of a task. It is displayed as a progress bar.
In this article, we will learn about different sizes of progress bars.
Bulma Progress Bar Sizes Classes:
- is-small: This class is used to set the progress bar size to small.
- is-normal: This class is used to set the progress bar size to normal.
- is-medium: This class is used to set the progress bar size to medium.
- is-large: This class is used to set the progress bar size to large.
Syntax:
<progress class="progress is-size" value="20" max="100"> .... </progress>
Example: The below example shows the use of progress bar size classes in Bulma.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bulma Progress bar Size</title>
<link rel='stylesheet' href=
</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>
|
Output:
Bulma Progress bars Sizes
Reference Link: https://bulma.io/documentation/elements/progress/#sizes