Spinner

Displays an animated loading indicator.

Loading, plase wait

import { component$, useStyles$ } from '@builder.io/qwik';
import { Spinner } from 'qwik-primitives';
import styles from './styles.css?inline';

export const SpinnerDemo = component$(() => {
  useStyles$(styles);

  return (
    <Spinner.Root class="spinner-root">
      <span aria-hidden="true" class="spinner-leaf" />
      <span aria-hidden="true" class="spinner-leaf" />
      <span aria-hidden="true" class="spinner-leaf" />
      <span aria-hidden="true" class="spinner-leaf" />
      <span aria-hidden="true" class="spinner-leaf" />
      <span aria-hidden="true" class="spinner-leaf" />
      <span aria-hidden="true" class="spinner-leaf" />
      <span aria-hidden="true" class="spinner-leaf" />

      <Spinner.Label>Loading, plase wait</Spinner.Label>
    </Spinner.Root>
  );
});

.spinner-root {
  --spinner-animation-duration: 800ms;

  height: 1.5rem;
  width: 1.5rem;
  display: block;
  position: relative;
  opacity: 0.65;
}

.spinner-leaf {
  position: absolute;
  top: 0;
  left: calc(50% - 12.5% / 2);
  height: 100%;
  width: 12.5%;
  color: #eeeef0;
  animation-name: spinner-leaf-fade !important;
  animation-duration: var(--spinner-animation-duration) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

.spinner-leaf::before {
  content: '';
  display: block;
  height: 30%;
  width: 100%;
  border-radius: 0.1875rem;
  background-color: currentColor;
}

.spinner-leaf:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: calc(-8 / 8 * var(--spinner-animation-duration)) !important;
}

.spinner-leaf:nth-child(2) {
  transform: rotate(45deg);
  animation-delay: calc(-7 / 8 * var(--spinner-animation-duration)) !important;
}

.spinner-leaf:nth-child(3) {
  transform: rotate(90deg);
  animation-delay: calc(-6 / 8 * var(--spinner-animation-duration)) !important;
}

.spinner-leaf:nth-child(4) {
  transform: rotate(135deg);
  animation-delay: calc(-5 / 8 * var(--spinner-animation-duration)) !important;
}

.spinner-leaf:nth-child(5) {
  transform: rotate(180deg);
  animation-delay: calc(-4 / 8 * var(--spinner-animation-duration)) !important;
}

.spinner-leaf:nth-child(6) {
  transform: rotate(225deg);
  animation-delay: calc(-3 / 8 * var(--spinner-animation-duration)) !important;
}

.spinner-leaf:nth-child(7) {
  transform: rotate(270deg);
  animation-delay: calc(-2 / 8 * var(--spinner-animation-duration)) !important;
}

.spinner-leaf:nth-child(8) {
  transform: rotate(315deg);
  animation-delay: calc(-1 / 8 * var(--spinner-animation-duration)) !important;
}

@keyframes spinner-leaf-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}

Features

Support for SVG spinners.
Support for CSS spinners.

Import

import { Spinner } from 'qwik-primitives';

Anatomy

Import all parts and piece them together.

import { component$ } from '@builder.io/qwik';
import { Spinner } from 'qwik-primitives';

const SpinnerDemo = component$(() => {
  return (
    <Spinner.Root>
      <Spinner.Label />
    </Spinner.Root>
  );
});

API Reference

Root

Contains all the parts of a spinner. This component is based on the span element.

Prop	Default	Type
`as`	No default value	`FunctionComponent` Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.
`style`	No default value	`CSSProperties` The inline style for the element.

Data attribute	Values
`[data-scope]`	`"spinner"`
`[data-part]`	`"root"`

Label

The fallback loading text. This text by default will be only visible to screen readers. This component is based on the span element.

Prop	Default	Type
`as`	No default value	`FunctionComponent` Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.
`visuallyHidden`	`true`	`boolean` When `true`, label will be hide from the screen in an accessible way.
`style`	No default value	`CSSProperties` The inline style for the element.

Data attribute	Values
`[data-scope]`	`"spinner"`
`[data-part]`	`"label"`
`[data-visually-hidden]`	Present when the label is visually hidden

Examples

With label

By default the content of Spinner.Label will be only visible to screen readers. If you want the label to be visible pass visuallyHidden={false} on Spinner.Label component.

import { component$ } from '@builder.io/qwik';
import { Spinner } from 'qwik-primitives';

const SpinnerDemo = component$(() => {
  return (
    <Spinner.Root>
      <Spinner.Label visuallyHidden={false}>Loading, plase wait</Spinner.Label>
    </Spinner.Root>
  );
});

SVG Spinner

You can use this compnent as an accessible container for svg spinner.

import { component$ } from '@builder.io/qwik';
import { Spinner } from 'qwik-primitives';

const SpinnerDemo = component$(() => {
  return (
    <Spinner.Root>
      <svg
        width="1.5rem"
        height="1.5rem"
        stroke="currentColor"
        viewBox="0 0 38 38"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
      >
        <g fill="none" fill-rule="evenodd">
          <g transform="translate(2.5 2.5)" stroke-width="5">
            <circle stroke-opacity=".5" cx="16" cy="16" r="16"></circle>
            <path d="M32 16c0-9.94-8.06-16-16-16">
              <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 16 16"
                to="360 16 16"
                dur="1s"
                repeatCount="indefinite"
              />
            </path>
          </g>
        </g>
      </svg>
      <Spinner.Label>Loading, plase wait</Spinner.Label>
    </Spinner.Root>
  );
});

CSS Spinner

You can use this compnent as an accessible container for CSS spinner.

// index.tsx
import { component$, useStyles$ } from '@builder.io/qwik';
import { Spinner } from 'qwik-primitives';
import styles from './styles.css?inline';

const SpinnerDemo = component$(() => {
  useStyles$(styles);

  return (
    <Spinner.Root>
      <span class="my-spinner" />
      <Spinner.Label>Loading, plase wait</Spinner.Label>
    </Spinner.Root>
  );
});

/* styles.css */
.my-spinner {
  position: relative;
  display: block;
  height: 1.5rem;
  width: 1.5rem;
}

.my-spinner::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  border: 3px solid currentColor;
  border-radius: 9999px;
}

.my-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 9999px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}