Loading
- Angular:
mds-loader - CSS/HTML (mds-styles): Loader
- Figma: ✅ — abrir Design System 2.0 ↗
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Loading é um indicador visual que comunica o processamento de uma tarefa ou o carregamento de conteúdos em andamento. Ele gerencia a expectativa do usuário, confirmando que o sistema está operando em segundo plano.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Contextualização: Sempre que possível, informe o que está sendo carregado em vez de usar apenas um termo genérico.
- Brevidade: Utilize Caixa de Sentença e evite o uso de pronomes ou artigos.
- Uso de Reticências (…): Utilize reticências apenas se o carregamento for um processo demorado que indica uma espera ativa. No caso de spinners (ícones giratórios) pequenos em botões, a reticência é opcional.
- Localização: * Global: Para carregamento de páginas inteiras.
- Inline: Para ações específicas, como clicar em um botão de “Salvar”.
- Skeleton: Para antecipar a estrutura de tabelas ou painéis de dados.
** Exemplos de Escrita (Dos & Don’ts)**
Seção intitulada “** Exemplos de Escrita (Dos & Don’ts)**”| Contexto Logístico | Estilo Incorreto (Longo/Vago) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Geral | Por favor, aguarde enquanto carregamos… | Carregando… |
| Relatórios | O sistema está gerando o seu relatório de fretes | Gerando relatório… |
| Busca | Procurando por motoristas disponíveis no pátio | Buscando motoristas… |
| Botão | Salvando os dados do cadastro | Salvando… |