Skip to content

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

35%

Props

Nome
Tipo
Default
Opções
Descrição
variantstring'green'green
teal
turquoise
blue
indigo
violet
pink
red
orange
amber
gray
dark
Define a cor da ProgressCircular.
sizestring'md'sm
md
lg
Define o tamanho (diâmetro) da ProgressCircular.
* value (required)number0 -- Define o valor correspondente ao percentual ou fração preenchida da ProgressCircular.
maxValuenumber100 -- Define o valor máximo, a porção toda do processo, da ProgressCircular. Por padrão o valor máximo é 100 (padrão porcentagem).
slimbooleanfalse -- Torna a espessura do circulo da ProgressCircular menor.
thickbooleanfalse -- Torna a espessura do circulo da ProgressCircular maior.
noLabelbooleanfalse -- Controla a exibição da label.

Última atualização:

Released under the Apache-2.0 License.