`<vcf-progress-spinner>`

Basic


<vcf-progress-spinner value="0.3"></vcf-progress-spinner>

Indeterminate

When the value is undefined, the progress spinner will animate indefinitely.


<vcf-progress-spinner></vcf-progress-spinner>

Custom Bounds

By default, the value is clamped between 0 and 1. You can customize the bounds using the min and the max properties.

Note: min must be less then max.

Update value


<vcf-progress-spinner id="progress-spinner-custom-bounds" value="20" min="10" max="110"></vcf-progress-spinner>
<vaadin-button id="update-spinner-with-bounds">Update value</vaadin-button>
<script>
  window.addEventListener('WebComponentsReady', function () {
    document.querySelector('#update-spinner-with-bounds').addEventListener('click', function () {
      var progress = document.querySelector('#progress-spinner-custom-bounds');
      progress.value += 10;
      if (progress.value > progress.max) {
        progress.value = progress.min;
      }
    });
  });
</script>

Custom Styles

When the value is undefined, the progress spinner will animate indefinitely.


<vcf-progress-spinner class="custom"></vcf-progress-spinner>
<style>
  vcf-progress-spinner.custom {
    --vaadin-progress-line-width: 6px;
    --vaadin-progress-circle-size: 60px;
    --vaadin-progress-background-color: transparent;
    --vaadin-progress-foreground-color: magenta;
  }

</style>