Spinner

<gstock-spinner> | GstockSpinner

Tamaño

Utilice el atributo size para establecer el tamaño del progreso.

<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 valor del progreso.

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

Determinado

Utilice el atributo determinado para desactivar la animación indeterminada.

<gstock-spinner determinate></gstock-spinner>

Mostrar contenido

Utilice el slot default para mostrar el contenido dentro del cargador circular.

50%

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

<br />

<gstock-icon-button icon="minus" variant="outlined" size="small"></gstock-icon-button>
<gstock-icon-button icon="plus" variant="outlined" size="small"></gstock-icon-button>

<script type="module">
  
  const spinner = document.querySelector('gstock-spinner');
  const subtractButton = document.querySelector('gstock-icon-button[icon=minus]');
  const addButton = document.querySelector('gstock-icon-button[icon=plus]');

  subtractButton.addEventListener('click', () => {
    const value = Math.max(0, spinner.value - 10);
    spinner.value = value;
    spinner.textContent = `${value}%`;
    subtractButton.disabled = value === 0;
    addButton.disabled = value === 100;
  });

  addButton.addEventListener('click', () => {
    const value = Math.min(100, spinner.value + 10);
    spinner.value = value;
    spinner.textContent = `${value}%`;
    addButton.disabled = value === 100;
    subtractButton.disabled = value === 0;
  });
</script>

Propiedades personalizadas

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

<gstock-spinner></gstock-spinner>

<style>
  gstock-spinner {
    --track-width: 8px;
    --indicator-transition-duration: 0.5s;
    --percentage: 50;
  }
</style>