Pular para o conte√ļdo principal

Progress Bar

Vis√£o geral#

O componente progress bar comunica de forma visual o status sobre o carregamento até a conclusão de uma operação do sistema, seja download, upload ou processamento.

Componentes relacionados:

Quando usar#

Utilize-o para informar o carregamento de uma operação com duração maior do que 10 segundos.

Considere utilizar o componente loading caso o tempo necessário seja até 10 segundos.

Anatomia#

Estruturalmente, o progress bar é composto por: uma bar indicator, uma tray e um infor bar, conforme imagem abaixo:

Apresentação de uma barra de progresso em parte representada pela cor azul indicando o progresso da ação, possuindo na parte inferior esquerda um texto informativo sobre o processo e na parte inferior direita, um valor percentual do progresso.
  1. Bar indicator: é a forma que preenche a barra conforme o carregamento ocorre, de maneira determinada ou indeterminada;
  2. Tray: é a base que define a largura do componente, onde a bar indicator poderá percorrer;
  3. Info bar: é o texto de apoio posicionado na parte inferior esquerda da barra, que auxilia os usuários a entenderem do que se trata o carregamento, junto com a quantidade percentual posicionada na parte inferior direita.

O estado de error modifica a infor bar, passando a exibir um ícone de exclamação seguido por uma mensagem de erro. Saiba mais em Estados

Varia√ß√Ķes#

Modo Single#

Pensando na modularidade do Design System, o progress bar possui o modo single, no qual comp√Ķe apenas os elementos da barra de progresso em sua forma m√≠nima, conforme imagem abaixo:

Apresentação de uma barra de progresso em parte representada pela cor azul indicando o progresso da ação
  1. Bar indicator: é a forma que preenche a barra conforme o carregamento ocorre, de maneira determinada ou indeterminada;
  2. Tray: é a base que define a largura do componente, onde a bar indicator poderá percorrer.

Tamanhos#

O componente progress bar possui duas varia√ß√Ķes de tamanho, sendo:

Representação do componente progress bar conforme citado anteriormente, nos dois tamanhos conforme descrição à seguir.
  1. Large (Grande): 0.5rem (8px);
  2. Medium (Médio): 0.25rem (4px).

Por padrão é utilizado o tamanho medium.

Estados#

O componente possui também os três seguintes estados:

Representação do componente em três estados na mesma ordem, conforme descrição à seguir.
  1. Normal: o preenchimento da barra em cor azul, indicando atividade no carregamento;
  2. Success: o preenchimento completo da barra em cor verde, indicando conclus√£o do carregamento;
  3. Error: o preenchimento da barra e conte√ļdo da info bar em vermelho, indicando falha no carregamento.

No modo single, o componente continua respeitando a composição básica, ou seja, sem a info bar.

Comportamento#

O componente progress bar possui dois tipos de comportamentos, sendo:

Representação do componente exibindo os dois estados na mesma ordem, conforme descrição à seguir.
  1. Determinado: para quando h√° um carregamento mensur√°vel, como por exemplo, de 0% a 100%.
  2. Indeterminado: para quando n√£o h√° um carregamento mensur√°vel, como por exemplo, longos processamentos que gastem um tempo consider√°vel ou de tempo desconhecido.

Boas pr√°ticas#

Foram estruturados os padr√Ķes de usabilidade para auxiliar na utiliza√ß√£o do componente e garantir uma boa experi√™ncia aos usu√°rios. Por isso, √© muito importante que ao utilizar este componente, as pessoas que o projetarem devem levar em considera√ß√£o os seguintes crit√©rios:

Fazer#

  • Sempre d√™ algum tipo de feedback imediato;
  • Ao exibir o carregamento de uma sequ√™ncia de processos, indique o progresso geral em vez do progresso de cada atividade;
  • Mantenha os r√≥tulos entre uma a duas palavras;
  • Use o texto auxiliar com uma barra de progresso se o processo for complexo ou tiver um longo tempo de espera. Isso permite que os usu√°rios saibam quais sub processos est√£o ocorrendo.

N√£o fazer#

  • N√£o utilizar indicadores de progresso est√°ticos (como texto apenas informando que o processo est√° sendo realizado).

Acessibilidade tratada no componente#

O componente progress bar foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG) 2.1. Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente internamente e n√£o devem ser alteradas por quem utilizar. S√£o elas:

  • Cores n√£o devem ser utilizadas como √ļnica maneira de transmitir conte√ļdo ou distinguir elementos visuais (1.4.1: Use of color (A));
  • Textos devem ter uma rela√ß√£o de contraste entre primeiro e segundo plano de ao menos 4.5-1 (1.4.3: Contrast (Minimum) (AA));
  • Textos devem ter uma rela√ß√£o de contraste entre primeiro e segundo plano de ao menos 7:1 (1.4.6: Contrast (Enhanced) (AAA));
  • Sempre que uma mensagem de erro for exibida, ela deve identificar claramente qual √© o elemento que gerou o erro de forma visual e aud√≠vel (3.3.1: Error Identification (A)):
    • Exemplo: mudan√ßa de cor no elemento + √≠cone de alerta + uma mensagem em texto.

      Nota: verificar junto com critério 3.3.3: Error Suggestion (AA);

  • Qualquer tipo de mensagem que √© resultado de uma a√ß√£o ou que informa o andamento de um processo e que seja relevante para as pessoas, deve ser transmitida sem que ocorra uma mudan√ßa de contexto (foco) na tela (4.1.3: Status Messages (AA)).

Observa√ß√Ķes:

Leitor de tela: da mesma forma que as pessoas têm o feedback visual de que algo está carregando ao ver o progress bar, as pessoas usuárias de leitores de tel devem estar ciente de que algo está acontecendo em segundo plano.

Barra de informa√ß√£o: deve ser exibida para tecnologias assistivas. As altera√ß√Ķes s√£o fornecidas programaticamente como atualiza√ß√Ķes de status.