O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Barra de progresso

Indicadores de progresso incluem indicadores de progresso lineares e circulares.

Como usar

Indicadores de progresso lineares são escritos puramente em CSS e entram em vigor apenas escrevendo o código HTML.

Indicadores de progresso circulares são inicializados automaticamente após o carregamento da página. Para indicadores circulares gerados dinamicamente, é necessário chamar mdui.mutation() para inicialização.

Cores

Indicadores de progresso lineares usam a cor primária.

Indicadores de progresso circulares usam a cor primária ou são coloridos.

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Progresso e atividade

Indicador de progresso linear

Progresso indeterminado

Este indicador de progresso é usado quando o valor exato do progresso não pode ser conhecido.

Exemplo

<div class="mdui-progress">
  <div class="mdui-progress-indeterminate"></div>
</div>

Progresso determinado

Este indicador de progresso é usado quando o valor exato do progresso pode ser conhecido.

Modifique o valor da propriedade width do elemento <div class="mdui-progress-determinate"></div> para atualizar o progresso.

Exemplo

<div class="mdui-progress">
  <div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>

Indicador de progresso circular

Basta adicionar o elemento <div class="mdui-spinner"></div> para gerar um indicador de progresso circular. Adicione a classe .mdui-spinner-colorful para gerar um indicador circular colorido.

Você pode modificar os valores de estilo width e height da classe .mdui-spinner para alterar o tamanho do indicador circular, mas certifique-se de que os valores de width e height sejam iguais.

Cor única

Exemplo

<div class="mdui-spinner"></div>

Colorido

Exemplo

<div class="mdui-spinner mdui-spinner-colorful"></div>

Indicadores de progresso circulares gerados dinamicamente

Se o seu componente de indicador de progresso circular for gerado dinamicamente, é necessário chamar mdui.mutation() para inicialização.

Se você precisar modificar um componente de indicador circular existente, chame o método mdui.updateSpinners() para reinicializar o componente. Este método pode aceitar um seletor CSS (que deve conter o nome da classe .mdui-spinner), um elemento DOM ou um array de elementos DOM como parâmetro, indicando que apenas os indicadores circulares especificados serão reinicializados. Se nenhum parâmetro for passado, todos os indicadores circulares na página serão reinicializados.

Lista de classes CSS

Nome da classe	Descrição
`.mdui-progress`	Define um indicador de progresso linear.
`.mdui-progress-indeterminate`	Indicador de progresso linear com progresso indeterminado.
`.mdui-progress-determinate`	Indicador de progresso linear com progresso determinado.
`.mdui-spinner`	Define um indicador de progresso circular.
`.mdui-spinner-colorful`	Indicador de progresso circular colorido.

Collapse