Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.
In this article, we will learn how will include progress bar variables on your web page. Another advantage with Bulma is that you simply need to have an understanding of HTML and CSS to implement this framework (Although knowing JavaScript can help the existing features according to your needs). Bulma also allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling.
Progress bars: It is used to display the progress of a process and it helps us to visualize how much of the process is complete and how much is left. For this, the percentage is used to display the amount of completion.
Syntax:
<progress>...</progress>
Bulma Progress Bar Variables:
- progress-bar-background-color: This variable is used to define the progress bar border color.
- progress-value-background-color: This variable is used to set the color of the progress.
- progress-border-radius: This variable is used to define the border radius of the progress bar.
- progress-indeterminate-duration: This variable is used to set the time duration that the progress bar will take to achieve the targeted value.
- progress-colors: This variable is used to set the color of the text of the progress bar.
The number of elements in the progress tag is listed below:
- class: This attribute is used for the selection of that particular element.
- value: This attribute is used for defining the value.
- max: This attribute is used for defining the max value.
Example: The following code demonstrates the Bulma Progress bar variables.
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content=
"width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
</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>
|
Output:
Example2: The following code demonstrates the Bulma is-success, is-info, and is-danger Progress bar variables.
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content=
"width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
<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>
|
Output:
Reference: https://bulma.io/documentation/elements/progress/#variables