Barra de Progresso

Um indicador de progresso é uma representação visual do progresso de um usuário iniciado pelo sistema. Uploads /downloads de arquivos são um ótimo exemplo de uso da Progress Bar. Os usuários estão mais dispostos a tolerar um longo tempo de espera se virem o progresso real.

Tipos de Progress Bar

Quando houver uma duração de objetivo específica, use o progresso determinado para informar os usuários sobre o processo. Dois exemplos são upload / download de arquivo ou uma série de etapas de configuração que acontecem durante um processo de inicialização do sistema.

Ao usar o progresso determinado, não esquecer de:

• Mostrar o progresso em direção a uma meta máxima específica ou duração conhecida;
• Fazer uso de um rótulo (opcional) que mostre a porcentagem de conclusão;
• Usar mensagens específicas para sinalizar o início do processo, processo concluído, etc.

<progress class="progress is-primary" value="40" max="100"></progress>

• Mostra o progresso em direção a uma meta máxima específica ou duração conhecida
• Tem uma etiqueta opcional que mostra a porcentagem de conclusão
• Mantenha o mínimo de mensagens
• Use mensagens específicas: início do processo, processo concluído, etc.

Progresso Indeterminado

<progress class="progress is-primary is-indeterminate"></progress>

Quando não houver estimativa para o tempo de conclusão ou meta de um processo, mostra o andamento indeterminado. Os indicadores de progresso expressam um tempo de espera não especificado.Isso indica que o trabalho está ocorrendo, mas não indica um escopo ou implica uma estimativa de quanto tempo levará para ser concluído. Um exemplo é o upload de um arquivo de dados que será analisado antes de uma resposta, carregar um aplicativo, enviar um formulário ou salvar atualizações.

Aplicação

Use indicadores de progresso para manter o usuário no controle ao concluir uma tarefa específica. Ao dividir o objetivo final em subtarefas menores, ele aumenta a porcentagem de conclusão à medida que cada tarefa é concluída. À medida que mais informações sobre um processo se tornam disponíveis, um indicador de progresso pode mudar de um estado indeterminado para um determinado.

Quando usar

• Quando o progresso pode ser indicado por porcentagem
• Progressão lógica
• Manter o usuário informado sobre onde ele está no processo ou tarefa em questão

Boas práticas

• Use a validação para confirmar que uma etapa anterior foi concluída. Se o usuário não puder prosseguir para outra etapa sem primeiro concluir uma tarefa, use uma notificação para informá-lo/cenário de erro.
• Exiba a Progress Bar em ordem da esquerda para a direita. Indique ao usuário que ele está executando um processo de várias etapas e mostre a direção do movimento.
• Permita que o usuário volte a uma etapa anterior para revisar o envio de seus dados.
• Mantenha o usuário informado sobre onde ele está no processo ou tarefa em questão. Isso dará a ele uma sensação de controle.
• Rótulos claros devem acompanhar o indicador de progresso para indicar o que o usuário realizará em cada etapa. Mantenha os rótulos entre uma ou duas palavras.

Exemplo

<div>
  <div class="level">
    <div class="level-left">
      <div>
        <span class="has-text-weight-semibold">Envio da mensagem de boas-vindas</span>
        <p>São aceitos apenas arquivos em formato MP3 e WAV</p>
      </div>
    </div>
    <div class="level-right">
      <button class="button">Adicionar arquivo</button>
    </div>
  </div>
  <progress class="progress" value="3" max="5"></progress>
  <div class="level">
    <div class="level-left"></div>
    <div class="level-right"><small>60%</small></div>
  </div>
</div>