Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
Una barra de progreso se utiliza para mostrar el progreso de un proceso en una computadora. Una barra de progreso muestra cuánto del proceso se completó y cuánto queda.
Ejemplo 1: Este ejemplo crea una barra de progreso simple usando Bulma.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Progress bar</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns {
margin-top: 70px;
}
h1 {
color: green !important;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div>
<h1 class='title'>
Progress bar
</h1>
</div>
<div>
<progress class="progress"
value="40" max="100">40
</progress>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo crea diferentes tamaños de barras de progreso.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Progress bar</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 70px;
}
h1{
color:green !important;
margin-bottom: 20px;
}
.table td{
font-size: 20px;
border: none
}
.table th{
font-size: 20px;
border: none
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div>
<h1 class='title'>
Different sizes Progress bars
</h1>
<hr>
</div>
<table class='table is-fullwidth'>
<thead>
<tr>
<th>Size</th>
<th>Progress bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Small</td>
<td>
<div>
<progress class=
"progress is-small"
value="25" max="100">25
</progress>
</div>
</td>
</tr>
<tr>
<td>Default</td>
<td>
<div>
<progress class=
"progress" value="40"
max="100">40
</progress>
</div>
</td>
</tr>
<tr>
<td>Medium</td>
<td>
<div>
<progress class=
"progress is-medium"
value="55" max="100">55
</progress>
</div>
</td>
</tr>
<tr>
<td>Large</td>
<td>
<div>
<progress class=
"progress is-large"
value="75" max="100">75
</progress>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: este ejemplo crea barras de progreso de diferentes colores.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Progress bar</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 70px;
}
h1{
color:green !important;
margin-bottom: 30px;
}
.table td{
font-size: 20px;
border:none
}
.table th{
font-size: 20px;
border:none
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div>
<h1 class='title'>
Different colors Progress bars
</h1>
<hr>
</div>
<table class='table is-fullwidth'>
<thead>
<tr>
<th>Color</th>
<th>Progress bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Primary</td>
<td>
<div>
<progress class=
"progress is-primary"
value="20" max="100">20
</progress>
</div>
</td>
</tr>
<tr>
<td>Link</td>
<td>
<div>
<progress class=
"progress is-link"
value="35" max="100">
35
</progress>
</div>
</td>
</tr>
<tr>
<td>Info</td>
<td>
<div>
<progress class=
"progress is-info"
value="50" max="100">
50
</progress>
</div>
</td>
</tr>
<tr>
<td>Success</td>
<td>
<div>
<progress class=
"progress is-success"
value="65" max="100">65
</progress>
</div>
</td>
</tr>
<tr>
<td>Warning</td>
<td>
<div>
<progress class=
"progress is-warning"
value="80" max="100">80
</progress>
</div>
</td>
</tr>
<tr>
<td>Danger</td>
<td>
<div>
<progress class=
"progress is-danger"
value="95" max="100">95
</progress>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: este ejemplo crea una barra de progreso indeterminada de diferentes colores.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Progress bar</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns {
margin-top: 70px;
}
h1 {
color: green !important;
margin-bottom: 30px;
}
.table td {
font-size: 20px;
border: none
}
.table th {
font-size: 20px;
border: none
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div>
<h1 class='title'>
indeterminate Progress bars
</h1>
<hr>
</div>
<table class='table is-fullwidth'>
<thead>
<tr>
<th>Color</th>
<th>Progress bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Primary</td>
<td>
<div>
<progress class=
"progress is-primary"
max="100">20
</progress>
</div>
</td>
</tr>
<tr>
<td>Link</td>
<td>
<div>
<progress class=
"progress is-link"
max="100">35
</progress>
</div>
</td>
</tr>
<tr>
<td>Info</td>
<td>
<div>
<progress class=
"progress is-info"
max="100">50
</progress>
</div>
</td>
</tr>
<tr>
<td>Success</td>
<td>
<div>
<progress class=
"progress is-success"
max="100">65
</progress>
</div>
</td>
</tr>
<tr>
<td>Warning</td>
<td>
<div>
<progress class=
"progress is-warning"
max="100">80
</progress>
</div>
</td>
</tr>
<tr>
<td>Danger</td>
<td>
<div>
<progress class=
"progress is-danger"
max="100">95
</progress>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Producción:
Explicación: la barra de progreso indeterminada se usa para mostrar algún progreso que se está realizando, pero la duración real aún no está determinada. Cuando el atributo de valor HTML no está definido, se muestra una barra de progreso indeterminada.
Nota: Aquí, en todos los ejemplos anteriores, usamos algunas clases adicionales de Bulma como contenedor, columna, título, tabla, etc. para diseñar bien el contenido.
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA