Spinner

<gstock-spinner> | GstockSpinner

Examples

Tamaño

Utilice el atributo size para establecer el tamaño del cargador circular.

<gstock-spinner size="small"></gstock-spinner>
<gstock-spinner size="medium"></gstock-spinner>
<gstock-spinner size="large"></gstock-spinner>

Valor

Utilice el atributo value para establecer el progreso del cargador circular (0–100).

50%

<gstock-spinner value="50"></gstock-spinner>

Propiedades personalizadas

Utilice las variables CSS para personalizar los estilos del cargador circular.

<gstock-spinner value="65" size="large" class="custom-spinner"></gstock-spinner>

<style>
  .custom-spinner {
    --indicator-transition-duration: 0.8s;
  }

  .custom-spinner::part(track) {
    stroke: #e0e7ff;
  }

  .custom-spinner::part(indicator) {
    stroke: #6366f1;
  }
</style>