Pular para o conte√ļdo principal

Loading

Vis√£o geral#

O componente loading serve para informar que alguma a√ß√£o dentro da p√°gina est√° sendo executada, e deve ser evocado assim que houver o disparo desta a√ß√£o, sendo um feedback sem informa√ß√Ķes num√©ricas ou percentual.

Quando usar#

Seu uso é recomendado para tarefas que levam até 10 segundos para serem concluídas e que não seja necessário exibir o progresso da execução.

Considere utilizar o componente progress bar caso o tempo necess√°rio seja maior do que 10 segundos.

Anatomia#

O componente prev√™ duas varia√ß√Ķes em suas respectivas anatomias: single e overlay.

Single#

A variação single consta apenas o elemento spinner em sua forma, cor e animação, sendo este:

  • Um c√≠rculo sem preenchimento;
  • Uma indica√ß√£o de avan√ßo em cor azul em gradiente;
  • A repeti√ß√£o de movimento (looping) enquanto for exibido.
Três elementos alinhados na horizontal, sendo primeiro destacando o corpo do spinner como um todo. O segundo indicando o shape, que é um circulo com bordas na cor rosa e fundo na mesma cor num tom mais leve. O terceiro elemento indica o fill (preenchimento), aplicado na cor azul em degradê, representando um giro no sentido anti-horário.
  1. Spinner
  2. Shape
  3. Fill

Overlay#

Na varia√ß√£o overlay, a composi√ß√£o consta as seguintes composi√ß√Ķes:

  • Um spinner, com as estiliza√ß√Ķes seguindo as mesmas defini√ß√Ķes da varia√ß√£o single;
  • Um loading text (texto de carregamento), posicionado logo abaixo do spinner;
  • Uma base, que sustenta o spinner e o texto de carregamento;
  • E um overlay, que fica abaixo da base e encobre todo o conte√ļdo da p√°gina.
Imagem ilustrando a composição do componente loading na variação overlay, contendo em seu eixo vertial a parte single e logo abaixo o texto de carregamento, a base na cor branca envelopando ambos e ao fundo o próprio overlay acizentado.
  1. Spinner
  2. Loading text
  3. Dots
  4. Base
  5. Overlay

Animação#

A animação ocorre nas partes spinner e dots.

Spinner#

Nesta parte do componente, a anima√ß√£o ocorre em quatro movimentos de rota√ß√Ķes entre 0¬ļ e -90¬ļ, com um delay de 1ms cada e dura√ß√£o de 300ms.

Imagem representando as quatro posi√ß√Ķes de rota√ß√£o da anima√ß√£o do componente Loading em funcionamento, nos graus 0, 90, 180 e -90 respectivamente.
  1. 0 grau;
  2. 90 graus;
  3. 180 graus;
  4. -90 graus;

Dots#

Na parte dos dots, que fica em anexo ao loading text, é utilizado a opacidade para preservar o espaço total e evitar que o texto se movimente conforme os pontos aparecem, independente das palavras definidas. Cada dot recebe 100% de opacidade com um delay de 1000ms cada.

Imagem representando as quatro exibi√ß√Ķes dos dots com anima√ß√£o do componente Loading em funcionamento.
  1. Sem dots;
  2. Um dot;
  3. Dois dots;
  4. Três dots;

Tamanhos#

Em todos os tamanhos, a área total da construção do shape segue a mesma proporção de 25% de preenchimento e 75% do interior vazado.

Imagem de um circulo bom bordas largas na cor rosa representando o corpo do componente Loading.
  1. Preenchimento;
  2. Interior;

Além disso, contém os tamanhos lg (large), md (medium), sm (small) e xs (extra small), sendo md por padrão.

Imagem representando os quatro tamanhos componente Loading em funcionamento, sendo large, medium, small e extra small, respectivamente.
  1. Large: 5rem (80px);
  2. Medium: 2rem (48px);
  3. Small: 1.5rem (24px);
  4. Extra small: 1rem (16px).

Comportamento#

O spinner se mant√©m em looping cont√≠nuo at√© que a a√ß√£o esteja conclu√≠da, estando sua base e conte√ļdo sempre posicionados no meio da tela, tanto no sentido vertical quanto no horizontal.

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#

  • Apresentar feedback imediato ao usu√°rio quando o sistema sofrer altera√ß√Ķes;
  • Utilizar em a√ß√Ķes que demoram de 2 a 10 segundos;
  • Utilizar indicadores de carregamento animados.

N√£o fazer#

  • N√£o deixar o sistema sem feedback quando o usu√°rio executar uma a√ß√£o;
  • N√£o utilizar caso a a√ß√£o tenha mais de 10 segundos de dura√ß√£o;
  • N√£o utilizar indicadores de carregamento est√°tico;
  • N√£o utilizar apenas cores para representar algo ou fornecer feedback;
  • N√£o tirar o foco e/ou contexto da tela em mensagens apresentadas.

Acessibilidade tratada no componente#

O componente loading 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 podem ser alteradas por quem utilizar. S√£o elas:

  • Ser acess√≠vel por leitores de tela, deixando o usu√°rio ciente de que algo est√° acontecendo em segundo plano;
  • Mesmo na varia√ß√£o single, deve ser previsto um texto assistivo para identificar a espera, trazendo um pouco mais de informa√ß√£o para os usu√°rios com leitor de tela;
  • Caso n√£o seja definida nenhuma descri√ß√£o, o conte√ļdo do loading text pode ser assumido como texto assistivo, neste caso, sem o uso de retic√™ncias (dots).
  • Utilizar medidas relativas para possibilitar um zoom de at√© 200% sem perda do conte√ļdo ou funcionalidade (1.4.4 ‚Äď Redimensionar (A));