Progreso
Las barras de progreso incluyen tanto la barra de progreso lineal como la circular.
Modo de uso
La barra de progreso lineal está escrita solo con CSS; basta con escribir el código HTML para que funcione.
La barra de progreso circular se inicializa automáticamente cuando la página termina de cargarse. Para las barras generadas dinámicamente, es necesario llamar a mdui.mutation() para inicializarlas.
Color
La barra de progreso lineal usa el color principal.
La barra de progreso circular usa el color principal o un conjunto de colores.
Lectura relacionada
Pautas de diseño de Material Design: componentes - Progress & Activity
Barra de progreso lineal
Progreso indeterminado
Esta barra de progreso se usa cuando no se puede conocer el valor exacto del progreso.
<div class="mdui-progress">
<div class="mdui-progress-indeterminate"></div>
</div>Progreso determinado
Esta barra de progreso se usa cuando se puede conocer el valor exacto del progreso.
Puedes actualizar el progreso modificando el valor del atributo width del elemento <div class="mdui-progress-determinate"></div>.
<div class="mdui-progress">
<div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>Barra de progreso circular
Solo tienes que añadir el elemento <div class="mdui-spinner"></div> para generar una barra de progreso circular. Añadir la clase .mdui-spinner-colorful genera una barra circular multicolor.
Puedes modificar el tamaño de la barra de progreso circular cambiando los valores de estilo width y height de la clase .mdui-spinner, pero asegúrate de que width y height tengan el mismo valor.
Barra de progreso circular generada dinámicamente
Si el componente de la barra de progreso circular se genera dinámicamente, debes llamar a mdui.mutation() para inicializarlo.
Si necesitas modificar un componente de barra circular existente, debes llamar al método mdui.updateSpinners() para reinicializarlo. Este método puede aceptar un selector CSS (que debe incluir la clase .mdui-spinner), un elemento DOM o un array de elementos DOM como argumento para indicar solo qué barras circulares reinicializar. Si no se pasa ningún argumento, se reinicializarán todas las barras circulares de la página.
Lista de clases CSS
| Nombre de clase | Descripción |
|---|---|
.mdui-progress | Define una barra de progreso lineal. |
.mdui-progress-indeterminate | Barra de progreso lineal con progreso indeterminado. |
.mdui-progress-determinate | Barra de progreso lineal con progreso determinado. |
.mdui-spinner | Define una barra de progreso circular. |
.mdui-spinner-colorful | Barra de progreso circular multicolor. |