Loading
Tipo: Core
- DesignersFigma Design System 2.0
- Devs · HTML/CSSmds-styles Storybook com classes e exemplos
- Devs · Angularmds-angular Storybook com inputs e outputs
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… |
Para desenvolvedores
Seção intitulada “Para desenvolvedores”Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.
HTML/CSS (mds-styles)
Seção intitulada “HTML/CSS (mds-styles)”Exemplo
Seção intitulada “Exemplo”Story Default do Storybook:
<div class="mds-loader mds-loader--default"> <div class="mds-loader" style="width: 48px; height: 48px; margin: 0 auto 16px auto; border: 4px solid var(--mds-colors-secondary-main); border-top-color: transparent; border-radius: 50%; opacity: 0.5;"></div></div>Variações e opções
Seção intitulada “Variações e opções”Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.
| Opção | Valores | Padrão no exemplo |
|---|---|---|
variant |
default primary secondary white |
default |
Classes CSS
Seção intitulada “Classes CSS”Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.
| Tipo | Classes |
|---|---|
| Bloco | .mds-loader |
| Elementos | .mds-loader__spinner .mds-loader__spinner__path |
| Modificadores | .mds-loader__spinner__path--1 .mds-loader__spinner__path--2 .mds-loader__spinner--async .mds-loader--finish .mds-loader--rotate |
Angular (mds-angular)
Seção intitulada “Angular (mds-angular)”Seletor
Seção intitulada “Seletor”mds-loader
O Loader é um ícone giratório animado que permite aos usuários saber que o conteúdo está sendo carregado.
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'' |
Classe CSS customizada adicionada ao host |
stroke |
number |
1 |
Grossura da linha/borda do loader |
size |
number |
24 |
Tamanho em px do loader |
type |
'sync' | 'async' | 'mobiis' |
'mobiis' |
Tipo de animação |