ProgressCircular
ProgressCirculars são componentes que indicam o status/progresso de uma operação em andamento, em formato circular.
Quando usar:
- For necessário transmitir a ideia de progresso ou percentual de uma operação em andamento.
- For necessário transmitir a ideia de status de uma operação em andamento e que fração dela já foi concluída.
- For necessário chamar a atenção do usuário para uma informação específica de maneira gráfica.
Quanddo não usar:
- For necessário representar fração de um processo com muitas etapas.
Uso
js
<CdsProgressCircular
variant="green"
size="md"
text="Lorem Ipsum"
@click="progressCircularClick = true"
/>
Preview
Props
Nome | Tipo | Default | Opções | Descrição |
---|---|---|---|---|
variant | string | 'green' | green teal turquoise blue indigo violet pink red orange amber gray dark | Define a cor da ProgressCircular. |
size | string | 'md' | sm md lg | Define o tamanho (diâmetro) da ProgressCircular. |
* value (required) | number | 0 | -- | Define o valor correspondente ao percentual ou fração preenchida da ProgressCircular. |
maxValue | number | 100 | -- | Define o valor máximo, a porção toda do processo, da ProgressCircular. Por padrão o valor máximo é 100 (padrão porcentagem). |
slim | boolean | false | -- | Torna a espessura do circulo da ProgressCircular menor. |
thick | boolean | false | -- | Torna a espessura do circulo da ProgressCircular maior. |
noLabel | boolean | false | -- | Controla a exibição da label. |