Spinner
Spinner
Use a spinner to indicate some content is loading. You can use a custom property to adjust the size of the spinner.
| Custom Property | Default Value | Description |
|---|---|---|
--size |
2rem (32px) | The size of the spinner |
Example
Spinners indicators in different colors and sizes.
HTML
<div class="pv-flex">
<div class="pv-spinner"></div>
<div class="pv-spinner-dark"></div>
<div class="pv-spinner-light"></div>
</div>
<div class="pv-flex">
<div class="pv-spinner" style="--size: 1.5rem"></div>
<div class="pv-spinner-dark" style="--size: 1.5rem"></div>
<div class="pv-spinner-light" style="--size: 1.5rem"></div>
</div>
<div class="pv-flex">
<div class="pv-spinner" style="--size: 1.25rem"></div>
<div class="pv-spinner-dark" style="--size: 1.25rem"></div>
<div class="pv-spinner-light" style="--size: 1.25rem"></div>
</div>
<div class="pv-flex">
<div class="pv-spinner" style="--size: 1rem"></div>
<div class="pv-spinner-dark" style="--size: 1rem"></div>
<div class="pv-spinner-light" style="--size: 1rem"></div>
</div>
<div class="pv-flex">
<div class="pv-spinner" style="--size: .75rem"></div>
<div class="pv-spinner-dark" style="--size: .75rem"></div>
<div class="pv-spinner-light" style="--size: .75rem"></div>
</div>