Spinner

<quiet-spinner>

stable

since 1.0

Spinners tell the user that content is loading or a request is processing in the background.

<quiet-spinner></quiet-spinner>

Examples Jump to heading

Changing the size Jump to heading

Spinners are sized relative to the current font size. This allows you to place them into many contexts without having to explicitly size them. To change the size, set the font-size property on the spinner or an ancestor element.

<quiet-spinner style="font-size: 1rem;"></quiet-spinner>
<quiet-spinner style="font-size: 2rem;"></quiet-spinner>
<quiet-spinner style="font-size: 3rem;"></quiet-spinner>

Changing the colors Jump to heading

To change the spinner's colors, set the --indicator-color and --track-color custom properties on the spinner.

<div style="font-size: 2rem;">
  <quiet-spinner style="--indicator-color: royalblue;"></quiet-spinner>
  <quiet-spinner style="--indicator-color: deeppink;"></quiet-spinner>
  <quiet-spinner style="--indicator-color: forestgreen;"></quiet-spinner>
</div>

Using a custom spinner Jump to heading

To use a custom spinner, slot in an <img> or <svg> element. When using custom spinners, the default animation will not be applied. This allows you to use GIF, APNG, or custom SVG images of your own. The spinner will still be correctly recognized by assistive devices as an indeterminate progress bar.

Here's an example using an APNG image. You can download it here if you want to use it.

<quiet-spinner style="font-size: 2rem;">
  <img src="/assets/examples/spinner.png" alt=""></img>
</quiet-spinner>

Here are some examples using animated SVGs from the SVG spinners library. These SVGs are available under the MIT license. Note that fill="currentColor" has been added to match the text color.

<!-- Rotating dots -->
<quiet-spinner style="font-size: 2rem;">
  <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><circle cx="12" cy="2.5" r="1.5" opacity=".14"/><circle cx="16.75" cy="3.77" r="1.5" opacity=".29"/><circle cx="20.23" cy="7.25" r="1.5" opacity=".43"/><circle cx="21.50" cy="12.00" r="1.5" opacity=".57"/><circle cx="20.23" cy="16.75" r="1.5" opacity=".71"/><circle cx="16.75" cy="20.23" r="1.5" opacity=".86"/><circle cx="12" cy="21.5" r="1.5"/><animateTransform attributeName="transform" type="rotate" calcMode="discrete" dur="0.75s" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" repeatCount="indefinite"/></g></svg>
</quiet-spinner>

<!-- Bouncing dots -->
<quiet-spinner style="font-size: 2rem;">
  <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="12" r="3"><animate id="spinner_qFRN" begin="0;spinner_OcgL.end+0.25s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle><circle cx="12" cy="12" r="3"><animate begin="spinner_qFRN.begin+0.1s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle><circle cx="20" cy="12" r="3"><animate id="spinner_OcgL" begin="spinner_qFRN.begin+0.2s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle></svg>
</quiet-spinner>

<!-- Bars -->
<quiet-spinner style="font-size: 2rem;">
  <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="6" width="2.8" height="12"><animate id="spinner_CcmT" begin="0;spinner_IzZB.end-0.1s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="0;spinner_IzZB.end-0.1s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect><rect x="5.8" y="6" width="2.8" height="12"><animate begin="spinner_CcmT.begin+0.1s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="spinner_CcmT.begin+0.1s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect><rect x="10.6" y="6" width="2.8" height="12"><animate begin="spinner_CcmT.begin+0.2s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="spinner_CcmT.begin+0.2s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect><rect x="15.4" y="6" width="2.8" height="12"><animate begin="spinner_CcmT.begin+0.3s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="spinner_CcmT.begin+0.3s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect><rect x="20.2" y="6" width="2.8" height="12"><animate id="spinner_IzZB" begin="spinner_CcmT.begin+0.4s" attributeName="y" calcMode="spline" dur="0.6s" values="6;1;6" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/><animate begin="spinner_CcmT.begin+0.4s" attributeName="height" calcMode="spline" dur="0.6s" values="12;22;12" keySplines=".36,.61,.3,.98;.36,.61,.3,.98"/></rect></svg>
</quiet-spinner>

<!-- Pulse -->
<quiet-spinner style="font-size: 2rem;">
  <svg fill="currentColor" width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ngNb{animation:spinner_ZRWK 1.2s cubic-bezier(0.52,.6,.25,.99) infinite}.spinner_6TBP{animation-delay:.6s}@keyframes spinner_ZRWK{0%{transform:translate(12px,12px) scale(0);opacity:1}100%{transform:translate(0,0) scale(1);opacity:0}}</style><path class="spinner_ngNb" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"/><path class="spinner_ngNb spinner_6TBP" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"/></svg>
</quiet-spinner>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-spinner> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/spinner/spinner.js';

To manually import <quiet-spinner> from npm, use the following code.

import '@quietui/quiet/dist/components/spinner/spinner.js';

Slots Jump to heading

Spinner supports the following slots. Learn more about using slots

Name	Description
(default)	A custom spinner to show in lieu of the default one. Works best with `<img>` and `<svg>` elements. Custom spinners will not be animated, allowing you to use animated GIF, APNG, and SVG animations without conflict.

CSS custom properties Jump to heading

Spinner supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--indicator-color`	The color of the spinner's indicator.	`var(--quiet-primary-fill-mid)`
`--track-color`	The color of the spinner's track.	`var(--quiet-primary-fill-mid)`
`--speed`	The speed for one complete rotation.	`0.75s`

Spinner

Examples Jump to heading #

Changing the size Jump to heading #

Changing the colors Jump to heading #

Using a custom spinner Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

CSS custom properties Jump to heading #