Card image

Círculo de progresso

Os círculos de progresso mostram a progressão de uma operação do sistema, como download, upload, processamento, etc. de forma visual;

Eles podem representar um progresso determinado ou indeterminado.

Opções

# Variante padrão
  • Os círculos de progresso são usados para mostrar visualmente a progressão de uma operação do sistema, como processamento, upload, download, etc;
  • Por padrão, os círculos de progresso têm um preenchimento verde que mostra o progresso.
# Valor, valor mínimo, valor máximo
  • O valor é o progresso de uma operação do sistema (por exemplo, download, upload, processamento) dentro do intervalo do círculo de progresso, do valor mínimo ao valor máximo;
  • Os valores mínimo e máximo também podem ser personalizados de forma apropriada para o que quer que o círculo 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 um círculo de progresso é indeterminado.
# Tamanho
  • Os círculos de progresso vêm em 3 tamanhos: pequeno, médio (padrão) ou grande;
  • Eles estão disponíveis para atender a vários contextos;
  • O pequeno círculo de progresso pode ser usado no lugar de um ícone ou em espaços apertados, enquanto o grande pode ser usado para carregamento de página inteira.
# Indeterminado
  • Um círculo de progresso pode ser determinado ou indeterminado. Por padrão, os círculos de progresso são determinados.
  • Use um círculo de progresso determinado quando o progresso puder ser calculado em relação a uma meta específica (por exemplo, baixar um arquivo de tamanho conhecido);
  • Use um círculo 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).

Diretrizes de uso

# Use os círculos de progresso para carregar visualizações
  • Círculos de progresso médios e grandes são otimizados para grandes áreas sem restrições de espaço. Use-os para carregar conteúdo em visualizações (por exemplo, páginas da Web, painéis, etc.)
# Use um pequeno círculo de progresso quando o espaço for limitado
  • Pequenos círculos de progresso são adequados quando o espaço é limitado vertical e horizontalmente, como em botões, itens de menu e campos de entrada.
v1