Determinate Progress Bar (barra de progresso)

Uma barra fina no topo da página avança aos poucos durante a navegação e se completa ao carregar.

Adicione uma barra de carregamento (Top Loading Bar) em [onde], também chamada page progress bar.
Uma barra fina na borda superior deve avançar rápido no início e depois cada vez mais devagar enquanto a página carrega; quando o carregamento terminar, ela deve correr até o fim e esmaecer.
Nunca deixe que ela chegue ao fim antes de o carregamento realmente terminar, e não deixe que ela cubra ou desloque o conteúdo da página.

Uma barra ou um anel se preenche conforme o usuário rola a página ou o artigo.

Adicione um "Scroll Progress Indicator" (também chamado de reading progress bar) em [onde].
Uma barra fina no topo deve se preencher da esquerda para a direita conforme o leitor rola, chegando à largura total no final.
Ligue-a diretamente à posição de rolagem, sem atraso de suavização, e não deixe que ela cubra o conteúdo.

Um segmento de barra percorre a trilha repetidamente quando a duração é desconhecida.

Adicione uma barra de progresso indeterminada (Indeterminate Linear Progress) em [onde], também chamada indeterminate progress bar.
Um segmento curto deve percorrer a trilha de uma ponta à outra várias vezes, rápido e suave, enquanto a duração da tarefa for desconhecida.
Faça o segmento entrar e sair totalmente da trilha para que o loop não tenha emendas visíveis, e marque-a como barra de progresso ocupada para leitores de tela.

Um arco cresce em volta de um anel para mostrar a porcentagem concluída.

Adicione um progresso circular (Progress Ring) em [onde], também chamado circular progress ou radial progress.
Começando no topo, um arco deve crescer no sentido horário ao redor do anel para mostrar a porcentagem concluída, desacelerando suavemente ao parar, enquanto o número no centro sobe junto.
Mantenha o arco e o número sincronizados, e exponha o valor com a semântica correta de barra de progresso para leitores de tela.

Uma lista de etapas é destacada ou marcada uma a uma conforme uma tarefa longa avança.

Adicione um "Multi-Step Loader" (também chamado step loader ou checklist loader) em [onde].
As etapas devem se acender uma de cada vez, de cima para baixo, e cada uma deve ganhar um pequeno check que surge com um leve pulo ao ser concluída, em um ritmo calmo e fácil de ler.
Avance as etapas conforme o progresso real da tarefa em vez de um temporizador fixo, e anuncie cada etapa concluída para leitores de tela.