Barra de progresso

As barras de progresso mostram a progressão de uma operação do sistema: processamento, download, upload, etc., de forma visual.

Eles podem representar um progresso determinado ou indeterminado.

As barras de progresso são usadas para mostrar visualmente a progressão de uma operação do sistema, como processamento, download, upload, etc;
Por padrão, as barras de progresso têm um preenchimento verde que mostra o progresso.

As barras de progresso devem ter uma etiqueta que forneça contexto sobre a operação que está sendo executada;
Use reticências no final do texto da etiqueta para comunicar que o processo está em andamento;
Em casos raros em que o contexto é suficiente e um especialista em acessibilidade revisou o design, a etiqueta pode ser indefinida;
A etiqueta é sempre colocada acima da faixa.

O valor é o progresso de uma operação do sistema (por exemplo, processamento, download, upload) dentro do intervalo da barra de progresso, do valor mínimo ao valor máximo;
Os valores mínimo e máximo também podem ser personalizados de forma adequada para o que quer que a barra de progresso esteja mostrando;
Por padrão, o valor mínimo começa em 0 e o valor máximo é definido como 100;
Esses valores não são aplicáveis quando uma barra de progresso é indeterminada.

As barras de progresso podem ter uma etiqueta de valor que fornece informações detalhadas sobre o progresso (por exemplo, "60%" ou "2 de 8");
Essa etiqueta de valor funciona junto com a etiqueta e não deve ser exibido se a própria etiqueta não for exibida;
Também não deve ser exibido se o progresso for indeterminado;
Semelhante a etiqueta, a etiqueta de valor é sempre colocado acima da faixa.

A largura de uma barra de progresso pode ser personalizada adequadamente para seu contexto;
A largura padrão é de tamanho 2400 (192 px no desktop e 240 px no celular).

As barras de progresso vêm em quatro tamanhos diferentes: pequeno, médio, grande e extragrande;
O tamanho médio é a opção padrão e mais usada;
Use os outros tamanhos com moderação; eles devem ser usados para criar uma hierarquia de importância dentro da página.

Uma barra de progresso pode ser determinada ou indeterminada;
Por padrão, as barras de progresso são determinadas. Use uma barra de progresso determinada quando o progresso puder ser calculado em relação a uma meta específica (por exemplo, baixar um arquivo de tamanho conhecido);
Use uma barra de progresso indeterminado quando o progresso estiver acontecendo, mas o tempo ou o esforço para a conclusão não puder ser determinado (por exemplo, tentando se reconectar a um servidor).

A largura mínima de uma barra de progresso é de 48 px e a largura máxima de uma barra de progresso é de 768 px, tanto para desktop quanto para escala de plataforma móvel;
Barras de progresso menores só devem ser usadas em locais onde não é necessário ter um rótulo.

Quando a etiqueta é muito longa para o espaço horizontal disponível, ela é quebrada para formar outra linha;
O valor é sempre mostrado por completo e nunca quebra ou trunca.

Tanto as barras quanto os círculos de progresso podem mostrar um progresso determinado ou indeterminado;
A área fornecida deve ajudar a determinar se uma barra de progresso ou círculo é melhor para aquele espaço;
Barras de progresso são preferidas em áreas verticalmente estreitas (tabelas, cartões, etc.) Use um círculo de progresso para carregamento de página inteira ou em áreas muito pequenas;
Use uma barra de progresso em uma caixa de diálogo do carregador.

Use o estilo interno para mostrar um rótulo associado à operação;
O estilo integrado sempre tem um rótulo alinhado à esquerda e um valor de porcentagem alinhado à direita acima da faixa;
O rótulo deve estar em maiúsculas e minúsculas;
Adicione reticências ("...") ao final para mostrar que a ação está em andamento (por exemplo, "Carregando dados..." ou "Atualizando configurações...").