loading-dev 0.3.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jakub Krehel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# loading-dev
+
+Loading, made beautiful. A small library of loading indicators for React.
+
+```sh
+npm install loading-dev
+```
+
+```tsx
+import { Arc } from "loading-dev";
+
+<Arc size={16} />
+```
+
+You can set `size`, `color`, `duration` and `easing`. The library exposes `playState` and also allows you to add custom styling. They work in Server Components and respect reduced motion out of the box. Requires React 19 or later.
+
+Available: `Arc`, `BouncingDots`, `CircularDots`, `Classic`, `ClassicV2`, `Clock`, `Comet`, `Compass`, `LinearDots`, `Orbit`, `Pulse`, `Radar`, `Ring`, `Swirl`.
+
+You can find docs and live previews at [loading.dev](https://loading.dev).
+
+## Development
+
+The library itself is at the root and the website is in `apps/web`. `pnpm dev` runs both.
+
+## Credits
+
+Made with care by [Jakub](https://x.com/jakubkrehel) and [Paul](https://x.com/paulfaivret).
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,135 @@
+import * as react from 'react';
+
+declare const DURATION_VAR = "--ld-duration";
+declare const PLAY_STATE_VAR = "--ld-play-state";
+declare const SPINNER_MOTION: {
+    readonly arc: {
+        readonly duration: 800;
+    };
+    readonly "bouncing-dots": {
+        readonly duration: 500;
+    };
+    readonly "circular-dots": {
+        readonly duration: 800;
+    };
+    readonly classic: {
+        readonly duration: 1200;
+    };
+    readonly "classic-v2": {
+        readonly duration: 800;
+    };
+    readonly clock: {
+        readonly duration: 1200;
+    };
+    readonly comet: {
+        readonly duration: 700;
+    };
+    readonly compass: {
+        readonly duration: 500;
+    };
+    readonly "linear-dots": {
+        readonly duration: 900;
+    };
+    readonly orbit: {
+        readonly duration: 750;
+    };
+    readonly pulse: {
+        readonly duration: 1200;
+    };
+    readonly radar: {
+        readonly duration: 1500;
+    };
+    readonly ring: {
+        readonly duration: 800;
+    };
+    readonly swirl: {
+        readonly duration: 1200;
+    };
+};
+type SpinnerName = keyof typeof SPINNER_MOTION;
+
+type Easing = "linear" | "ease-in-out" | "stacked";
+interface EasingProps {
+    easing?: Easing;
+}
+
+interface SpinnerProps {
+    /** Extra class names merged onto the root element. */
+    className?: string;
+    /**
+     * Any CSS color — `#f97316`, `oklch(70% 0.19 45)`, `rgb(249 115 22 / 60%)`,
+     * `var(--brand)`. Omit to keep inheriting the surrounding text color.
+     */
+    color?: string;
+    /**
+     * Length of one animation cycle in milliseconds. Omit to inherit
+     * `--ld-duration` from an ancestor, then the spinner's own default.
+     */
+    duration?: number;
+    /**
+     * Whether the animation runs. Omit to inherit `--ld-play-state` from an
+     * ancestor, which defaults to running.
+     */
+    playState?: "paused" | "running";
+    /** Width and height of the spinner in pixels. Defaults to 20. */
+    size?: number;
+}
+
+interface ArcProps extends SpinnerProps, EasingProps {
+}
+declare function Arc({ easing, ...rest }: ArcProps): react.JSX.Element;
+
+declare function BouncingDots(props: SpinnerProps): react.JSX.Element;
+
+declare function CircularDots(props: SpinnerProps): react.JSX.Element;
+
+declare function Classic(props: SpinnerProps): react.JSX.Element;
+
+declare function ClassicV2(props: SpinnerProps): react.JSX.Element;
+
+interface ClockProps extends SpinnerProps, EasingProps {
+}
+declare function Clock({ easing, ...rest }: ClockProps): react.JSX.Element;
+
+interface CometProps extends SpinnerProps, EasingProps {
+}
+declare function Comet({ easing, ...rest }: CometProps): react.JSX.Element;
+
+declare function Compass(props: SpinnerProps): react.JSX.Element;
+
+declare function LinearDots(props: SpinnerProps): react.JSX.Element;
+
+interface OrbitProps extends SpinnerProps, EasingProps {
+}
+declare function Orbit({ easing, ...rest }: OrbitProps): react.JSX.Element;
+
+declare function Pulse(props: SpinnerProps): react.JSX.Element;
+
+interface RadarProps extends SpinnerProps, EasingProps {
+}
+declare function Radar({ easing, ...rest }: RadarProps): react.JSX.Element;
+
+interface RingProps extends SpinnerProps, EasingProps {
+}
+declare function Ring({ easing, ...rest }: RingProps): react.JSX.Element;
+
+declare function Swirl(props: SpinnerProps): react.JSX.Element;
+
+declare const SPINNERS: {
+    arc: typeof Arc;
+    "bouncing-dots": typeof BouncingDots;
+    "circular-dots": typeof CircularDots;
+    classic: typeof Classic;
+    "classic-v2": typeof ClassicV2;
+    clock: typeof Clock;
+    comet: typeof Comet;
+    compass: typeof Compass;
+    "linear-dots": typeof LinearDots;
+    orbit: typeof Orbit;
+    pulse: typeof Pulse;
+    radar: typeof Radar;
+    ring: typeof Ring;
+    swirl: typeof Swirl;
+};
+
+export { Arc, type ArcProps, BouncingDots, CircularDots, Classic, ClassicV2, Clock, type ClockProps, Comet, type CometProps, Compass, DURATION_VAR, type Easing, type EasingProps, LinearDots, Orbit, type OrbitProps, PLAY_STATE_VAR, Pulse, Radar, type RadarProps, Ring, type RingProps, SPINNERS, SPINNER_MOTION, type SpinnerName, type SpinnerProps, Swirl };

package/dist/index.js

@@ -0,0 +1,910 @@
+// src/motion.ts
+var DURATION_VAR = "--ld-duration";
+var PLAY_STATE_VAR = "--ld-play-state";
+var SIZE_VAR = "--ld-size";
+var DEFAULT_SIZE = 20;
+var SIZE = `var(${SIZE_VAR}, ${DEFAULT_SIZE}px)`;
+var SPINNER_MOTION = {
+  arc: { duration: 800 },
+  "bouncing-dots": { duration: 500 },
+  "circular-dots": { duration: 800 },
+  classic: { duration: 1200 },
+  "classic-v2": { duration: 800 },
+  clock: { duration: 1200 },
+  comet: { duration: 700 },
+  compass: { duration: 500 },
+  "linear-dots": { duration: 900 },
+  orbit: { duration: 750 },
+  pulse: { duration: 1200 },
+  radar: { duration: 1500 },
+  ring: { duration: 800 },
+  swirl: { duration: 1200 }
+};
+function duration(name) {
+  return `var(${DURATION_VAR}, ${SPINNER_MOTION[name].duration}ms)`;
+}
+var PLAY_STATE = `var(${PLAY_STATE_VAR}, running)`;
+
+// src/easing.ts
+var DEFAULT_EASING = "linear";
+function spinClass(name, easing = DEFAULT_EASING) {
+  const base = `ld-${name}-spin`;
+  return easing === "linear" ? base : `${base} ${base}-${easing}`;
+}
+function rotationCss(name) {
+  return `
+.ld-${name}-spin {
+  transform-origin: center;
+  animation: ld-${name}-rotate ${duration(name)} linear infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+
+.ld-${name}-spin-ease-in-out {
+  animation-timing-function: ease-in-out;
+}
+
+.ld-${name}-spin-stacked {
+  animation-name: ld-${name}-rotate, ld-${name}-rotate;
+  animation-timing-function: linear, ease-in-out;
+  animation-composition: add;
+}
+
+@keyframes ld-${name}-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-${name}-spin {
+    animation: none;
+  }
+}
+`;
+}
+
+// src/frame.tsx
+import { jsx } from "react/jsx-runtime";
+function SpinnerStyle({
+  children,
+  name
+}) {
+  return /* @__PURE__ */ jsx("style", { href: `ld-${name}`, precedence: "loading-dev", children });
+}
+function cssVars(vars) {
+  return vars;
+}
+function spinnerRoot(name, { className, color, duration: duration2, playState, size = DEFAULT_SIZE }) {
+  return {
+    "aria-hidden": true,
+    className: [`ld-${name}`, className].filter(Boolean).join(" "),
+    style: cssVars({
+      [SIZE_VAR]: `${size}px`,
+      ...color === void 0 ? null : { color },
+      ...duration2 === void 0 ? null : { [DURATION_VAR]: `${duration2}ms` },
+      ...playState === void 0 ? null : { [PLAY_STATE_VAR]: playState }
+    })
+  };
+}
+
+// src/arc.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-arc {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("arc")}
+`;
+function Arc({ easing, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(SpinnerStyle, { name: "arc", children: css }),
+    /* @__PURE__ */ jsx2(
+      "svg",
+      {
+        ...spinnerRoot("arc", rest),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsx2(
+          "circle",
+          {
+            className: spinClass("arc", easing),
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeDasharray: "18 44.8",
+            strokeLinecap: "round",
+            strokeWidth: "2.5"
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/bouncing-dots.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DOTS = Array.from({ length: 3 }, (_, index) => index);
+var dur = duration("bouncing-dots");
+var css2 = `
+.ld-bouncing-dots {
+  display: flex;
+  align-items: center;
+  gap: calc(${SIZE} * 0.2);
+  height: ${SIZE};
+}
+
+.ld-bouncing-dots-dot {
+  width: calc(${SIZE} * 0.22);
+  height: calc(${SIZE} * 0.22);
+  background: currentColor;
+  border-radius: 9999px;
+  animation: ld-bouncing-dots-bounce ${dur} ease-in-out infinite alternate;
+  animation-play-state: ${PLAY_STATE};
+}
+
+.ld-bouncing-dots-dot:nth-child(1) {
+  animation-delay: calc(${dur} * -0.64);
+}
+
+.ld-bouncing-dots-dot:nth-child(2) {
+  animation-delay: calc(${dur} * -0.32);
+}
+
+@keyframes ld-bouncing-dots-bounce {
+  from {
+    transform: translateY(28%);
+  }
+  to {
+    transform: translateY(-72%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-bouncing-dots-dot {
+    animation: none;
+  }
+}
+`;
+function BouncingDots(props) {
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(SpinnerStyle, { name: "bouncing-dots", children: css2 }),
+    /* @__PURE__ */ jsx3("div", { ...spinnerRoot("bouncing-dots", props), children: DOTS.map((dot) => /* @__PURE__ */ jsx3("div", { className: "ld-bouncing-dots-dot" }, dot)) })
+  ] });
+}
+
+// src/circular-dots.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var DOTS2 = [
+  [8, 1.5],
+  [12.5962, 3.4038],
+  [14.5, 8],
+  [12.5962, 12.5962],
+  [8, 14.5],
+  [3.4038, 12.5962],
+  [1.5, 8],
+  [3.4038, 3.4038]
+];
+var dur2 = duration("circular-dots");
+var css3 = `
+.ld-circular-dots {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-circular-dots-dot {
+  animation: ld-circular-dots-fade ${dur2} linear infinite;
+  animation-delay: calc(${dur2} * (var(--ld-circular-dots-step) - ${DOTS2.length}) / ${DOTS2.length});
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-circular-dots-fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.2;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-circular-dots-dot {
+    opacity: 0.6;
+    animation: none;
+  }
+}
+`;
+function CircularDots(props) {
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx4(SpinnerStyle, { name: "circular-dots", children: css3 }),
+    /* @__PURE__ */ jsx4(
+      "svg",
+      {
+        ...spinnerRoot("circular-dots", props),
+        fill: "currentColor",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: DOTS2.map(([cx, cy], step) => /* @__PURE__ */ jsx4(
+          "circle",
+          {
+            className: "ld-circular-dots-dot",
+            cx,
+            cy,
+            r: "1.5",
+            style: cssVars({ "--ld-circular-dots-step": step })
+          },
+          `${cx}-${cy}`
+        ))
+      }
+    )
+  ] });
+}
+
+// src/classic.tsx
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var BARS = Array.from({ length: 12 }, (_, index) => index);
+var dur3 = duration("classic");
+var BAR_RULES = BARS.map(
+  (bar) => `
+.ld-classic-bar:nth-child(${bar + 1}) {
+  transform: rotate(${bar === 0 ? "0.0001" : bar * 30}deg) translate(146%);
+  animation-delay: calc(${dur3} * ${(bar / 12 - 1).toFixed(4)});
+}`
+).join("\n");
+var css4 = `
+.ld-classic {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-classic-inner {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-classic-bar {
+  position: absolute;
+  top: -3.9%;
+  left: -10%;
+  width: 24%;
+  height: 8%;
+  background: currentColor;
+  border-radius: 6px;
+  animation: ld-classic-spin ${dur3} linear infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+${BAR_RULES}
+
+@keyframes ld-classic-spin {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.15;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-classic-bar {
+    opacity: 0.5;
+    animation: none;
+  }
+}
+`;
+function Classic(props) {
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsx5(SpinnerStyle, { name: "classic", children: css4 }),
+    /* @__PURE__ */ jsx5("div", { ...spinnerRoot("classic", props), children: /* @__PURE__ */ jsx5("div", { className: "ld-classic-inner", children: BARS.map((bar) => /* @__PURE__ */ jsx5("div", { className: "ld-classic-bar" }, bar)) }) })
+  ] });
+}
+
+// src/classic-v2.tsx
+import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var TICKS = 8;
+var dur4 = duration("classic-v2");
+var TICK_RULES = Array.from(
+  { length: TICKS },
+  (_, tick) => `
+.ld-classic-v2-tick:nth-child(${tick + 1}) {
+  animation-delay: calc(${dur4} * ${(tick / TICKS - 1).toFixed(4)});
+}`
+).join("\n");
+var css5 = `
+.ld-classic-v2 {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-classic-v2-tick {
+  animation: ld-classic-v2-fade ${dur4} linear infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+${TICK_RULES}
+
+@keyframes ld-classic-v2-fade {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.4;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-classic-v2-tick {
+    opacity: 0.5;
+    animation: none;
+  }
+}
+`;
+function ClassicV2(props) {
+  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
+    /* @__PURE__ */ jsx6(SpinnerStyle, { name: "classic-v2", children: css5 }),
+    /* @__PURE__ */ jsx6(
+      "svg",
+      {
+        ...spinnerRoot("classic-v2", props),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: /* @__PURE__ */ jsxs5("g", { fill: "currentColor", children: [
+          /* @__PURE__ */ jsx6(
+            "path",
+            {
+              className: "ld-classic-v2-tick",
+              d: "M7.33334 0.666667C7.33334 0.298477 7.63181 0 8 0C8.36819 0 8.66667 0.298477 8.66667 0.666667V3.33333C8.66667 3.70152 8.36819 4 8 4C7.63181 4 7.33334 3.70152 7.33334 3.33333V0.666667Z"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "path",
+            {
+              className: "ld-classic-v2-tick",
+              d: "M11.7712 5.17154C11.5109 5.43189 11.0888 5.43189 10.8284 5.17154C10.5681 4.91119 10.5681 4.48908 10.8284 4.22873L12.714 2.34311C12.9744 2.08276 13.3965 2.08276 13.6568 2.34311C13.9172 2.60346 13.9172 3.02557 13.6568 3.28592L11.7712 5.17154Z"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "path",
+            {
+              className: "ld-classic-v2-tick",
+              d: "M12.6667 8.66667C12.2985 8.66667 12 8.36819 12 8.00001C12 7.63182 12.2985 7.33334 12.6667 7.33334H15.3333C15.7015 7.33334 16 7.63182 16 8.00001C16 8.36819 15.7015 8.66667 15.3333 8.66667H12.6667Z"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "path",
+            {
+              className: "ld-classic-v2-tick",
+              d: "M10.8284 11.7713C10.5681 11.5109 10.5681 11.0888 10.8284 10.8284C11.0888 10.5681 11.5109 10.5681 11.7712 10.8284L13.6568 12.7141C13.9172 12.9744 13.9172 13.3965 13.6568 13.6569C13.3965 13.9172 12.9744 13.9172 12.714 13.6569L10.8284 11.7713Z"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "path",
+            {
+              className: "ld-classic-v2-tick",
+              d: "M7.33333 12.6667C7.33333 12.2985 7.63181 12 8 12C8.36819 12 8.66667 12.2985 8.66667 12.6667V15.3333C8.66667 15.7015 8.36819 16 8 16C7.63181 16 7.33333 15.7015 7.33333 15.3333V12.6667Z"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "path",
+            {
+              className: "ld-classic-v2-tick",
+              d: "M3.28594 13.6569C3.02559 13.9172 2.60348 13.9172 2.34313 13.6569C2.08278 13.3965 2.08278 12.9744 2.34313 12.714L4.22875 10.8284C4.4891 10.5681 4.91121 10.5681 5.17156 10.8284C5.43191 11.0888 5.43191 11.5109 5.17156 11.7712L3.28594 13.6569Z"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "path",
+            {
+              className: "ld-classic-v2-tick",
+              d: "M0.666667 8.66667C0.298477 8.66667 1.60941e-08 8.36819 0 8.00001C-1.60941e-08 7.63182 0.298477 7.33334 0.666667 7.33334H3.33333C3.70152 7.33334 4 7.63182 4 8.00001C4 8.36819 3.70152 8.66667 3.33333 8.66667H0.666667Z"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "path",
+            {
+              className: "ld-classic-v2-tick",
+              d: "M2.34315 3.28594C2.0828 3.02559 2.0828 2.60348 2.34315 2.34314C2.6035 2.08279 3.02561 2.08279 3.28596 2.34313L5.17158 4.22875C5.43193 4.4891 5.43193 4.91121 5.17158 5.17156C4.91123 5.43191 4.48912 5.43191 4.22877 5.17156L2.34315 3.28594Z"
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/clock.tsx
+import { Fragment as Fragment6, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var css6 = `
+.ld-clock {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("clock")}
+`;
+function Clock({ easing, ...rest }) {
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx7(SpinnerStyle, { name: "clock", children: css6 }),
+    /* @__PURE__ */ jsxs6(
+      "svg",
+      {
+        ...spinnerRoot("clock", rest),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: [
+          /* @__PURE__ */ jsx7("circle", { cx: "8", cy: "8", fill: "currentColor", opacity: "0.1", r: "8" }),
+          /* @__PURE__ */ jsx7(
+            "path",
+            {
+              className: spinClass("clock", easing),
+              d: "M11.1937 2.92061C10.5206 2.49739 9.77304 2.21397 8.9954 2.08314C8.45076 1.99151 8 2.44772 8 3V7.20324C8 7.49211 8.12492 7.76686 8.34259 7.95677L11.8999 11.0603C12.3287 11.4344 12.9913 11.378 13.2643 10.8787C13.6356 10.1998 13.8736 9.45248 13.9617 8.67713C14.0892 7.55433 13.8971 6.41834 13.4074 5.39993C12.9177 4.38152 12.1503 3.5221 11.1937 2.92061Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/comet.tsx
+import { Fragment as Fragment7, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var css7 = `
+.ld-comet {
+  --ld-comet-stroke: calc(${SIZE} * 0.12);
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-comet-spin {
+  position: absolute;
+  inset: 0;
+}
+
+.ld-comet-tail {
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  background: conic-gradient(from 0deg, transparent, currentColor);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0);
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0);
+}
+
+.ld-comet-head {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: var(--ld-comet-stroke);
+  height: var(--ld-comet-stroke);
+  background: currentColor;
+  border-radius: 9999px;
+  transform: translateX(-50%);
+}
+
+${rotationCss("comet")}
+`;
+function Comet({ easing, ...rest }) {
+  return /* @__PURE__ */ jsxs7(Fragment7, { children: [
+    /* @__PURE__ */ jsx8(SpinnerStyle, { name: "comet", children: css7 }),
+    /* @__PURE__ */ jsx8("div", { ...spinnerRoot("comet", rest), children: /* @__PURE__ */ jsxs7("div", { className: spinClass("comet", easing), children: [
+      /* @__PURE__ */ jsx8("div", { className: "ld-comet-tail" }),
+      /* @__PURE__ */ jsx8("div", { className: "ld-comet-head" })
+    ] }) })
+  ] });
+}
+
+// src/compass.tsx
+import { Fragment as Fragment8, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var css8 = `
+.ld-compass {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-compass-ticks {
+  transform-origin: center;
+  animation: ld-compass-turn ${duration("compass")} ease-in-out infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-compass-turn {
+  to {
+    transform: rotate(90deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-compass-ticks {
+    animation: none;
+  }
+}
+`;
+function Compass(props) {
+  return /* @__PURE__ */ jsxs8(Fragment8, { children: [
+    /* @__PURE__ */ jsx9(SpinnerStyle, { name: "compass", children: css8 }),
+    /* @__PURE__ */ jsx9(
+      "svg",
+      {
+        ...spinnerRoot("compass", props),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: /* @__PURE__ */ jsxs8("g", { className: "ld-compass-ticks", fill: "currentColor", children: [
+          /* @__PURE__ */ jsx9("path", { d: "M7.33334 0.666667C7.33334 0.298477 7.63181 0 8 0C8.36819 0 8.66667 0.298477 8.66667 0.666667V3.33333C8.66667 3.70152 8.36819 4 8 4C7.63181 4 7.33334 3.70152 7.33334 3.33333V0.666667Z" }),
+          /* @__PURE__ */ jsx9("path", { d: "M12.6667 8.66667C12.2985 8.66667 12 8.3682 12 8.00001C12 7.63182 12.2985 7.33334 12.6667 7.33334H15.3333C15.7015 7.33334 16 7.63182 16 8.00001C16 8.3682 15.7015 8.66667 15.3333 8.66667H12.6667Z" }),
+          /* @__PURE__ */ jsx9("path", { d: "M7.33333 12.6667C7.33333 12.2985 7.63181 12 8 12C8.36819 12 8.66667 12.2985 8.66667 12.6667V15.3333C8.66667 15.7015 8.36819 16 8 16C7.63181 16 7.33333 15.7015 7.33333 15.3333V12.6667Z" }),
+          /* @__PURE__ */ jsx9("path", { d: "M0.666667 8.66667C0.298477 8.66667 1.60941e-08 8.3682 0 8.00001C-1.60941e-08 7.63182 0.298477 7.33334 0.666667 7.33334H3.33333C3.70152 7.33334 4 7.63182 4 8.00001C4 8.3682 3.70152 8.66667 3.33333 8.66667H0.666667Z" })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/linear-dots.tsx
+import { Fragment as Fragment9, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var COUNT = 3;
+var DOTS3 = Array.from({ length: COUNT }, (_, index) => ({
+  step: (COUNT - index) % COUNT
+}));
+var dur5 = duration("linear-dots");
+var css9 = `
+.ld-linear-dots {
+  display: flex;
+  align-items: center;
+  gap: calc(${SIZE} * 0.1875);
+  height: ${SIZE};
+}
+
+.ld-linear-dots-dot {
+  width: calc(${SIZE} * 0.1875);
+  height: calc(${SIZE} * 0.1875);
+  background: currentColor;
+  border-radius: 9999px;
+  animation: ld-linear-dots-fade ${dur5} linear infinite;
+  animation-delay: calc(${dur5} * var(--ld-linear-dots-step) / -${COUNT});
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-linear-dots-fade {
+  0% {
+    opacity: 1;
+  }
+  66.67% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-linear-dots-dot {
+    opacity: 0.75;
+    animation: none;
+  }
+}
+`;
+function LinearDots(props) {
+  return /* @__PURE__ */ jsxs9(Fragment9, { children: [
+    /* @__PURE__ */ jsx10(SpinnerStyle, { name: "linear-dots", children: css9 }),
+    /* @__PURE__ */ jsx10("div", { ...spinnerRoot("linear-dots", props), children: DOTS3.map((dot, index) => /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: "ld-linear-dots-dot",
+        style: cssVars({ "--ld-linear-dots-step": dot.step })
+      },
+      index
+    )) })
+  ] });
+}
+
+// src/orbit.tsx
+import { Fragment as Fragment10, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var css10 = `
+.ld-orbit {
+  --ld-orbit-stroke: calc(${SIZE} * 0.0625);
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-orbit-track {
+  position: absolute;
+  inset: 8%;
+  border-radius: 9999px;
+  background: conic-gradient(from 180deg, transparent 0deg, currentColor 180deg, transparent 180deg);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-orbit-stroke)), #000 0);
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-orbit-stroke)), #000 0);
+}
+
+.ld-orbit-dot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 25%;
+  height: 25%;
+  background: currentColor;
+  border-radius: 9999px;
+  transform: translate(-50%, -50%);
+}
+
+${rotationCss("orbit")}
+`;
+function Orbit({ easing, ...rest }) {
+  return /* @__PURE__ */ jsxs10(Fragment10, { children: [
+    /* @__PURE__ */ jsx11(SpinnerStyle, { name: "orbit", children: css10 }),
+    /* @__PURE__ */ jsxs10("div", { ...spinnerRoot("orbit", rest), children: [
+      /* @__PURE__ */ jsx11("div", { className: "ld-orbit-dot" }),
+      /* @__PURE__ */ jsx11("div", { className: `ld-orbit-track ${spinClass("orbit", easing)}` })
+    ] })
+  ] });
+}
+
+// src/pulse.tsx
+import { Fragment as Fragment11, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var css11 = `
+.ld-pulse {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-pulse-ring {
+  transform-origin: center;
+  animation: ld-pulse-ripple ${duration("pulse")} ease-out infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-pulse-ripple {
+  from {
+    opacity: 0.4;
+    transform: scale(0.25);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-pulse-ring {
+    opacity: 0.2;
+    animation: none;
+  }
+}
+`;
+function Pulse(props) {
+  return /* @__PURE__ */ jsxs11(Fragment11, { children: [
+    /* @__PURE__ */ jsx12(SpinnerStyle, { name: "pulse", children: css11 }),
+    /* @__PURE__ */ jsxs11(
+      "svg",
+      {
+        ...spinnerRoot("pulse", props),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: [
+          /* @__PURE__ */ jsx12(
+            "circle",
+            {
+              className: "ld-pulse-ring",
+              cx: "8",
+              cy: "8",
+              fill: "currentColor",
+              r: "8"
+            }
+          ),
+          /* @__PURE__ */ jsx12("circle", { cx: "8", cy: "8", fill: "currentColor", r: "2" })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/radar.tsx
+import { useId } from "react";
+import { Fragment as Fragment12, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var css12 = `
+.ld-radar {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("radar")}
+`;
+function Radar({ easing, ...rest }) {
+  const beamGradient = useId();
+  return /* @__PURE__ */ jsxs12(Fragment12, { children: [
+    /* @__PURE__ */ jsx13(SpinnerStyle, { name: "radar", children: css12 }),
+    /* @__PURE__ */ jsxs12(
+      "svg",
+      {
+        ...spinnerRoot("radar", rest),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: [
+          /* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsxs12(
+            "radialGradient",
+            {
+              cx: "8",
+              cy: "8",
+              gradientUnits: "userSpaceOnUse",
+              id: beamGradient,
+              r: "8",
+              children: [
+                /* @__PURE__ */ jsx13("stop", { offset: "0.3334", stopColor: "currentColor" }),
+                /* @__PURE__ */ jsx13("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx13("circle", { cx: "8", cy: "8", fill: "currentColor", opacity: "0.2", r: "8" }),
+          /* @__PURE__ */ jsx13("circle", { cx: "8", cy: "8", opacity: "0.2", r: "5.5", stroke: "currentColor" }),
+          /* @__PURE__ */ jsx13(
+            "path",
+            {
+              className: spinClass("radar", easing),
+              d: "M8 0C9.50657 0 10.9824 0.425672 12.2578 1.22754C13.5333 2.02953 14.557 3.17533 15.21 4.5332C15.8629 5.89107 16.1193 7.40626 15.9492 8.90332C15.7791 10.4001 15.1896 11.8184 14.249 12.9951L10.4707 9.69922C10.8037 9.21598 11 8.63123 11 8C11 6.34315 9.65685 5 8 5V0Z",
+              fill: `url(#${beamGradient})`
+            }
+          ),
+          /* @__PURE__ */ jsx13("circle", { cx: "8", cy: "8", fill: "currentColor", r: "2" })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/ring.tsx
+import { Fragment as Fragment13, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var css13 = `
+.ld-ring {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("ring")}
+`;
+function Ring({ easing, ...rest }) {
+  return /* @__PURE__ */ jsxs13(Fragment13, { children: [
+    /* @__PURE__ */ jsx14(SpinnerStyle, { name: "ring", children: css13 }),
+    /* @__PURE__ */ jsxs13(
+      "svg",
+      {
+        ...spinnerRoot("ring", rest),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 24 24",
+        children: [
+          /* @__PURE__ */ jsx14(
+            "circle",
+            {
+              cx: "12",
+              cy: "12",
+              opacity: "0.2",
+              r: "10",
+              stroke: "currentColor",
+              strokeWidth: "2.5"
+            }
+          ),
+          /* @__PURE__ */ jsx14(
+            "circle",
+            {
+              className: spinClass("ring", easing),
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              strokeDasharray: "16 46.8",
+              strokeLinecap: "round",
+              strokeWidth: "2.5"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/swirl.tsx
+import { Fragment as Fragment14, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+var RING = [0, 1, 2, 7, null, 3, 6, 5, 4];
+var CELLS = RING.map((place) => ({
+  place,
+  step: place === null ? null : (8 - place) % 8
+}));
+var dur6 = duration("swirl");
+var css14 = `
+.ld-swirl {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: calc(${SIZE} * 0.15625);
+  box-sizing: border-box;
+  width: ${SIZE};
+  height: ${SIZE};
+  padding: calc(${SIZE} * 0.0625);
+}
+
+.ld-swirl-cell {
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.0625);
+  animation: ld-swirl-fade ${dur6} linear infinite;
+  animation-delay: calc(${dur6} * var(--ld-swirl-step) / -8);
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-swirl-fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.2;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-swirl-cell {
+    opacity: 0.6;
+    animation: none;
+  }
+}
+`;
+function Swirl(props) {
+  return /* @__PURE__ */ jsxs14(Fragment14, { children: [
+    /* @__PURE__ */ jsx15(SpinnerStyle, { name: "swirl", children: css14 }),
+    /* @__PURE__ */ jsx15("div", { ...spinnerRoot("swirl", props), children: CELLS.map(
+      (cell, index) => cell.step === null ? /* @__PURE__ */ jsx15("div", {}, index) : /* @__PURE__ */ jsx15(
+        "div",
+        {
+          className: "ld-swirl-cell",
+          style: cssVars({ "--ld-swirl-step": cell.step })
+        },
+        index
+      )
+    ) })
+  ] });
+}
+
+// src/spinners.ts
+var SPINNERS = {
+  arc: Arc,
+  "bouncing-dots": BouncingDots,
+  "circular-dots": CircularDots,
+  classic: Classic,
+  "classic-v2": ClassicV2,
+  clock: Clock,
+  comet: Comet,
+  compass: Compass,
+  "linear-dots": LinearDots,
+  orbit: Orbit,
+  pulse: Pulse,
+  radar: Radar,
+  ring: Ring,
+  swirl: Swirl
+};
+export {
+  Arc,
+  BouncingDots,
+  CircularDots,
+  Classic,
+  ClassicV2,
+  Clock,
+  Comet,
+  Compass,
+  DURATION_VAR,
+  LinearDots,
+  Orbit,
+  PLAY_STATE_VAR,
+  Pulse,
+  Radar,
+  Ring,
+  SPINNERS,
+  SPINNER_MOTION,
+  Swirl
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "loading-dev",
+  "version": "0.3.1",
+  "description": "A lightweight library full of beautiful loading indicators for React.",
+  "keywords": [
+    "react",
+    "spinner",
+    "loading",
+    "loader",
+    "indicator"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jakubkrehel/loading.git"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "build:web": "pnpm --filter web build",
+    "dev": "pnpm run \"/^dev:/\"",
+    "dev:lib": "tsup --watch src",
+    "dev:web": "pnpm --filter web dev",
+    "fix": "biome check --write .",
+    "format": "biome format --write .",
+    "lint": "biome check .",
+    "prepublishOnly": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.13",
+    "@types/react": "^19",
+    "@types/react-dom": "^19.2.4",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "tsup": "^8.5.0",
+    "typescript": "^5",
+    "ultracite": "^7.11.1",
+    "vitest": "^4.1.11"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "packageManager": "pnpm@11.8.0"
+}