feat(component): Add loading indicator

apps/website/src/components/menu/menu.tsx

@@ -30,6 +30,10 @@ export const Menu = component$<Props>(({ onClose$ }) => {
     { label: 'Radio', path: `/docs/${appState.theme.toLowerCase()}/radio` },
     { label: 'Popover', path: `/docs/${appState.theme.toLowerCase()}/popover` },
     { label: 'Select', path: `/docs/${appState.theme.toLowerCase()}/select` },
+    {
+      label: 'Spinner',
+      path: `/docs/${appState.theme.toLowerCase()}/spinner`,
+    },
     { label: 'Tabs', path: `/docs/${appState.theme.toLowerCase()}/tabs` },
     { label: 'Toast', path: `/docs/${appState.theme.toLowerCase()}/toast` },
     { label: 'Toggle', path: `/docs/${appState.theme.toLowerCase()}/toggle` },

apps/website/src/routes/docs/daisy/spinner/index.tsx

@@ -0,0 +1,55 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { Spinner } from '@qwik-ui/theme-daisy';
+
+export default component$(() => {
+  useStylesScoped$(`
+    h1 { margin: 0.5rem 0 1rem 0; padding-top: 1rem; font-weight: bold; }
+    p { margin-bottom: 0.5rem; }
+  `);
+  return (
+    <>
+      <h2>This is the documentation for the Spinner</h2>
+
+      <h1>Spinner Example</h1>
+
+      <Spinner />
+
+      <h1>Size</h1>
+      <p>
+        Spinner are sized based on the font size. To change their size, set the{' '}
+        <b>font-size</b> property on the Spinner itself or on a parent element
+        as shown below.
+      </p>
+
+      <Spinner />
+      <Spinner class="text-3xl" />
+      <Spinner class="text-5xl" />
+
+      <h1>Track Width</h1>
+      <p>
+        The width of the Spinner track can be changed by the property{' '}
+        <b>width</b>.
+      </p>
+
+      <Spinner class="text-5xl" width="10px" />
+
+      <h1>Color</h1>
+      <p>
+        The colors of Spinner can be changed by the properties{' '}
+        <b>indicatorColor</b> and <b>trackColor</b>.
+      </p>
+      <Spinner
+        class="text-5xl"
+        width="10px"
+        indicatorColor="hsl(var(--s))"
+        trackColor="hsl(var(--n))"
+      />
+
+      <h1>Speed</h1>
+      <p>
+        The speed of the Spinner can be changed by the property <b>speed</b>.
+      </p>
+      <Spinner class="text-5xl" speed="5s" />
+    </>
+  );
+});

apps/website/src/routes/docs/headless/spinner/index.tsx

@@ -0,0 +1,55 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { Spinner } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStylesScoped$(`
+    h1 { margin: 0.5rem 0 1rem 0; padding-top: 1rem; font-weight: bold; }
+    p { margin-bottom: 0.5rem; }
+  `);
+  return (
+    <>
+      <h2>This is the documentation for the Spinner</h2>
+
+      <h1>Spinner Example</h1>
+
+      <Spinner />
+
+      <h1>Size</h1>
+      <p>
+        Spinner are sized based on the font size. To change their size, set the{' '}
+        <b>font-size</b> property on the Spinner itself or on a parent element
+        as shown below.
+      </p>
+
+      <Spinner />
+      <Spinner style="font-size: 2rem" />
+      <Spinner style="font-size: 3rem" />
+
+      <h1>Track Width</h1>
+      <p>
+        The width of the Spinner track can be changed by the property{' '}
+        <b>width</b>.
+      </p>
+
+      <Spinner style="font-size: 3rem" width="10px" />
+
+      <h1>Color</h1>
+      <p>
+        The colors of Spinner can be changed by the properties{' '}
+        <b>indicatorColor</b> and <b>trackColor</b>.
+      </p>
+      <Spinner
+        style="font-size: 3rem"
+        width="10px"
+        indicatorColor="darkblue"
+        trackColor="lightblue"
+      />
+
+      <h1>Speed</h1>
+      <p>
+        The speed of the Spinner can be changed by the property <b>speed</b>.
+      </p>
+      <Spinner style="font-size: 3rem" speed="5s" />
+    </>
+  );
+});

packages/daisy/src/components/spinner/spinner.tsx

@@ -0,0 +1,19 @@
+import { component$ } from '@builder.io/qwik';
+import { Spinner as HeadlessSpinner } from '@qwik-ui/headless';
+
+export type SpinnerProps = {
+  class?: string;
+  style?: string;
+  width?: string;
+  trackColor?: string;
+  indicatorColor?: string;
+  speed?: string;
+};
+
+export const Spinner = component$((props: SpinnerProps) => {
+  return (
+    <>
+      <HeadlessSpinner {...props} />
+    </>
+  );
+});

packages/daisy/src/index.ts

@@ -5,6 +5,7 @@ export * from './components/button-group/button-group';
 export * from './components/card';
 export * from './components/collapse/collapse';
 export * from './components/drawer/drawer';
+export * from './components/spinner/spinner';
 export * from './components/popover/popover';
 export * from './components/rating/rating';
 export * from './components/tabs';

packages/headless/src/components/spinner/spinner.css

@@ -0,0 +1,44 @@
+.spinner-container {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+}
+
+.spinner {
+  flex: 1 1 auto;
+  height: 100%;
+  width: 100%;
+}
+
+.track,
+.indicator {
+  fill: none;
+  cx: 0.5em;
+  cy: 0.5em;
+  transform-origin: 50% 50%;
+}
+
+.track {
+  transform-origin: 0 0;
+  mix-blend-mode: multiply;
+}
+
+.indicator {
+  stroke-linecap: round;
+  stroke-dasharray: 150% 75%;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+    stroke-dasharray: 0.01em, 2.75em;
+  }
+  50% {
+    transform: rotate(450deg);
+    stroke-dasharray: 1.375em, 1.375em;
+  }
+  100% {
+    transform: rotate(1080deg);
+    stroke-dasharray: 0.01em, 2.75em;
+  }
+}

packages/headless/src/components/spinner/spinner.tsx

@@ -0,0 +1,47 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { clsq } from '@qwik-ui/shared';
+import styles from './spinner.css?inline';
+
+export type SpinnerProps = {
+  class?: string;
+  style?: string;
+  width?: string;
+  trackColor?: string;
+  indicatorColor?: string;
+  speed?: string;
+};
+
+export const Spinner = component$((props: SpinnerProps) => {
+  const {
+    style,
+    class: classNames,
+    width = '2px',
+    trackColor = '#8080803f',
+    indicatorColor = '#006ce9',
+    speed = '2s',
+  } = props;
+  useStylesScoped$(styles);
+  return (
+    <div class={clsq('spinner-container', classNames)} style={style}>
+      <svg part="base" class="spinner" role="spinner">
+        <circle
+          class="track"
+          style={{
+            strokeWidth: width,
+            r: `calc(0.5em - ${width}/2)`,
+            stroke: trackColor,
+          }}
+        ></circle>
+        <circle
+          class="indicator"
+          style={{
+            strokeWidth: width,
+            r: `calc(0.5em - ${width}/2)`,
+            stroke: indicatorColor,
+            animation: `spin ${speed} linear infinite`,
+          }}
+        ></circle>
+      </svg>
+    </div>
+  );
+});

packages/headless/src/index.ts

@@ -6,6 +6,7 @@ export * from './components/card';
 export * from './components/pagination/pagination';
 export * from './components/collapse/collapse';
 export * from './components/drawer';
+export * from './components/spinner/spinner';
 export * from './components/menu/menu';
 export * from './components/popover';
 export * from './components/rating/rating';