LoadingIndicator
O LoadingIndicator é um componente utilizado para indicar o progresso do carregamento da página, proporcionando uma experiência de usuário mais fluida e informativa.
Quando usar:
- Em navegações entre páginas ou abas dentro de uma aplicação, onde o usuário precisa visualizar o progresso de carregamento de forma clara para saber que a transição está em andamento;
- Em aplicações onde o carregamento de conteúdo pode demorar, como em operações de rede ou carregamento de dados pesados.
Quando não usar:
- Para o carregamento de dados secundários ou ações que não afetam diretamente a navegação principal do usuário;
- Quando o usuário realiza interações que podem desencadear novos carregamentos, como o acionamento de um toggle switch. Nesses casos, considere o uso de alternativas como o Skeleton para mostrar o conteúdo sendo carregado ou o Spinner para indicar que uma ação está em andamento.
Uso
js
<CdsLoadingIndicator
v-model="showLoadingIndicator"
variant="blue"
/>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
* modelValue (required) | boolean | false | -- | Controla a exibição do LoadingIndicator. |
variant | string | 'green' | green teal blue indigo violet pink red orange amber dark | A variante de cor. São 10 variantes: |
intervalTime | number | 500 | -- | Define o tempo, em ms, do intervalo de mudança da barra de progresso. |