Loading
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Progresso
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
cancelLabel
| Atributo | cancel-label |
| Descrição | Define o texto do botão de cancelamento. No modo spinner, esta prop não tem efeito. |
| Tipo | string |
| Valor padrão | 'Cancelar' |
cancelable
| Atributo | cancelable |
| Descrição | Define se o botão de cancelamento será exibido. Ao pressionar o botão, o evento brLoadingCancel é emitido.No modo spinner, esta prop não tem efeito. |
| Tipo | boolean |
| Valor padrão | false |
completion
| Atributo | completion |
| Descrição | Define o comportamento quando o progresso atinge 100. No modo spinner, esta prop não tem efeito. |
| Tipo | "hide" | "persist" | "reset" |
| Valor padrão | 'persist' |
customId
| Atributo | custom-id |
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
label
| Atributo | label |
| Descrição | Define o rótulo exibido no modo spinner.No modo progress, esta prop não tem efeito. |
| Tipo | string |
| Valor padrão | --- |
labelPosition
| Atributo | label-position |
| Descrição | Define a posição da label em relação ao loading. |
| Tipo | "bottom" | "left" | "right" | "top" |
| Valor padrão | 'bottom' |
mode
| Atributo | mode |
| Descrição | Define o modo de exibição do componente. |
| Tipo | "progress" | "spinner" |
| Valor padrão | 'spinner' |
size
| Atributo | size |
| Descrição | Define o tamanho visual nos modos spinner e progress. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
speed
| Atributo | speed |
| Descrição | Define a velocidade da animação/transição. |
| Tipo | "fast" | "normal" | "slow" |
| Valor padrão | 'normal' |
value
| Atributo | value |
| Descrição | Define o progresso no modo progress.No modo spinner, esta prop não tem efeito.Valores inválidos são normalizados para 0. |
| Tipo | number |
| Valor padrão | 0 |
Slots
| Nome | Descrição |
|---|---|
"cancel-button" | Conteúdo customizado do botão de cancelar. Quando utilizado, a prop cancelLabel é ignorada. |
"label" | Rótulo customizado do loading. Quando utilizado, a prop label é ignorada. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brDidHide | Notifica que o componente foi ocultado. | true |
brDidShow | Notifica que o componente foi exibido. | true |
brIndeterminateStateChange | Notifica mudança do estado lógico no modo spinner. | true |
brLoadingCancel | Notifica clique no botão de cancelamento no modo progress. Este evento não altera o progresso automaticamente. A aplicação consumidora define a ação após o cancelamento (ex.: limpar ou ocultar). | true |
brLoadingChange | Notifica mudança de progresso no modo progress. | true |
brLoadingComplete | Notifica conclusão do progresso no modo progress. | true |
brLoadingReset | Notifica reinício do progresso no modo progress. | true |
Métodos
complete
| Assinatura | complete() => Promise<{ value: number; }> |
| Descrição | Define o progresso como concluído. |
| Parâmetros | --- |
hide
| Assinatura | hide() => Promise<{ visible: boolean; }> |
| Descrição | Oculta o componente. |
| Parâmetros | --- |
incrementValue
| Assinatura | incrementValue(step?: number) => Promise<{ value: number; }> |
| Descrição | Soma um valor ao progresso atual. |
| Parâmetros | step: Incremento aplicado. |
reset
| Assinatura | reset() => Promise<{ value: number; }> |
| Descrição | Reinicia o progresso e exibe o componente. |
| Parâmetros | --- |
setValue
| Assinatura | setValue(value: number) => Promise<{ value: number; }> |
| Descrição | Define o valor do progresso. |
| Parâmetros | value: Valor desejado. |
show
| Assinatura | show() => Promise<{ visible: boolean; }> |
| Descrição | Exibe o componente. |
| Parâmetros | --- |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"container" | Wrapper principal do loading. |
"label-wrapper" | Wrapper do rótulo no modo spinner. |
"percentage" | Texto de percentual no modo progress. |
"svg" | Elemento SVG principal do loading. |
"wrapper" | Wrapper do conteúdo do spinner/progress. |
Dependências
Depende de
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
Em relação ao versão Vue 1.x as seguintes props foram alteradas
| Versão Vue 1.x | Versão Stencil 2.x |
|---|---|
medium | size |
percent | value |
progress | mode |
Para mais informações sobre essas propriedades consulte a documentação acima.