loading-dev 0.3.6 → 0.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -1
- package/dist/arc.d.ts +4 -6
- package/dist/arc.js +1 -2
- package/dist/atom.d.ts +3 -5
- package/dist/atom.js +1 -2
- package/dist/blocks.d.ts +2 -4
- package/dist/blocks.js +1 -2
- package/dist/bouncing-dots.d.ts +2 -4
- package/dist/bouncing-dots.js +1 -2
- package/dist/{cap-Ba3uZx03.d.ts → cap-B_Mo1a7N.d.ts} +0 -2
- package/dist/cap.d.ts +1 -1
- package/dist/cap.js +1 -2
- package/dist/cascade.d.ts +3 -5
- package/dist/cascade.js +1 -2
- package/dist/chevrons.d.ts +2 -0
- package/dist/chevrons.js +36 -0
- package/dist/circular-dots.d.ts +2 -4
- package/dist/circular-dots.js +1 -2
- package/dist/classic-v2.d.ts +2 -4
- package/dist/classic-v2.js +1 -2
- package/dist/classic.d.ts +2 -4
- package/dist/classic.js +1 -2
- package/dist/clock.d.ts +3 -5
- package/dist/clock.js +1 -2
- package/dist/comet.d.ts +3 -5
- package/dist/comet.js +1 -2
- package/dist/compass.d.ts +2 -4
- package/dist/compass.js +1 -2
- package/dist/dual.d.ts +4 -6
- package/dist/dual.js +1 -2
- package/dist/{easing-DhnLArHS.d.ts → easing-BM_1QWrA.d.ts} +1 -3
- package/dist/easing.d.ts +1 -1
- package/dist/easing.js +1 -2
- package/dist/eclipse.d.ts +2 -4
- package/dist/eclipse.js +1 -2
- package/dist/fade.d.ts +2 -4
- package/dist/fade.js +1 -2
- package/dist/fill.d.ts +2 -0
- package/dist/fill.js +59 -0
- package/dist/flip.d.ts +2 -4
- package/dist/flip.js +1 -2
- package/dist/frame.d.ts +3 -5
- package/dist/frame.js +1 -2
- package/dist/gather.d.ts +2 -4
- package/dist/gather.js +1 -2
- package/dist/index.d.ts +12 -5
- package/dist/index.js +8 -1
- package/dist/leap.d.ts +2 -4
- package/dist/leap.js +1 -2
- package/dist/linear-dots.d.ts +2 -4
- package/dist/linear-dots.js +1 -2
- package/dist/loading.d.ts +2 -4
- package/dist/loading.js +1 -2
- package/dist/loop.d.ts +5 -0
- package/dist/loop.js +37 -0
- package/dist/morph.d.ts +2 -4
- package/dist/morph.js +1 -2
- package/dist/{motion-D_zUuA3S.d.ts → motion-trIEyOxA.d.ts} +7 -2
- package/dist/motion.d.ts +1 -1
- package/dist/motion.js +8 -2
- package/dist/orbit.d.ts +3 -5
- package/dist/orbit.js +1 -2
- package/dist/phases.d.ts +2 -0
- package/dist/phases.js +73 -0
- package/dist/pulse.d.ts +2 -4
- package/dist/pulse.js +1 -2
- package/dist/radar.d.ts +3 -5
- package/dist/radar.js +1 -2
- package/dist/ring.d.ts +4 -6
- package/dist/ring.js +1 -2
- package/dist/ripple.d.ts +2 -4
- package/dist/ripple.js +1 -2
- package/dist/scan.d.ts +2 -0
- package/dist/scan.js +56 -0
- package/dist/slide.d.ts +2 -4
- package/dist/slide.js +1 -2
- package/dist/snake.d.ts +4 -6
- package/dist/snake.js +1 -2
- package/dist/spinners.d.ts +15 -3
- package/dist/spinners.js +15 -2
- package/dist/split.d.ts +2 -0
- package/dist/split.js +52 -0
- package/dist/steps.d.ts +2 -0
- package/dist/steps.js +55 -0
- package/dist/swirl.d.ts +2 -4
- package/dist/swirl.js +1 -2
- package/dist/trace.d.ts +4 -6
- package/dist/trace.js +1 -2
- package/dist/{types-BYaenrWm.d.ts → types-D9_cXnjI.d.ts} +0 -2
- package/dist/types.d.ts +1 -1
- package/dist/wave.d.ts +2 -4
- package/dist/wave.js +1 -2
- package/package.json +6 -6
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { n as CapProps, r as DEFAULT_CAP, t as Cap } from "./cap-
|
|
2
|
-
import { i as PLAY_STATE_VAR, l as SpinnerName, n as DURATION_VAR, s as SPINNER_MOTION } from "./motion-
|
|
3
|
-
import { n as Easing, r as EasingProps, t as DEFAULT_EASING } from "./easing-
|
|
4
|
-
import { t as SpinnerProps } from "./types-
|
|
1
|
+
import { n as CapProps, r as DEFAULT_CAP, t as Cap } from "./cap-B_Mo1a7N.js";
|
|
2
|
+
import { i as PLAY_STATE_VAR, l as SpinnerName, n as DURATION_VAR, s as SPINNER_MOTION } from "./motion-trIEyOxA.js";
|
|
3
|
+
import { n as Easing, r as EasingProps, t as DEFAULT_EASING } from "./easing-BM_1QWrA.js";
|
|
4
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
5
5
|
import { Arc, ArcProps } from "./arc.js";
|
|
6
6
|
import { Atom, AtomProps } from "./atom.js";
|
|
7
7
|
import { Blocks, BlocksProps, BlocksSweep, DEFAULT_BLOCKS_SWEEP } from "./blocks.js";
|
|
8
8
|
import { BouncingDots } from "./bouncing-dots.js";
|
|
9
9
|
import { Cascade, CascadeProps } from "./cascade.js";
|
|
10
|
+
import { Chevrons } from "./chevrons.js";
|
|
10
11
|
import { CircularDots } from "./circular-dots.js";
|
|
11
12
|
import { ClassicV2 } from "./classic-v2.js";
|
|
12
13
|
import { Classic } from "./classic.js";
|
|
@@ -15,21 +16,27 @@ import { Comet, CometProps } from "./comet.js";
|
|
|
15
16
|
import { Compass } from "./compass.js";
|
|
16
17
|
import { Dual, DualProps } from "./dual.js";
|
|
17
18
|
import { Eclipse } from "./eclipse.js";
|
|
19
|
+
import { Fill } from "./fill.js";
|
|
18
20
|
import { Flip } from "./flip.js";
|
|
19
21
|
import { Gather } from "./gather.js";
|
|
20
22
|
import { Leap } from "./leap.js";
|
|
21
23
|
import { LinearDots } from "./linear-dots.js";
|
|
22
24
|
import { Loading } from "./loading.js";
|
|
25
|
+
import { Loop, LoopProps } from "./loop.js";
|
|
23
26
|
import { Morph } from "./morph.js";
|
|
24
27
|
import { Orbit, OrbitProps } from "./orbit.js";
|
|
28
|
+
import { Phases } from "./phases.js";
|
|
25
29
|
import { Pulse } from "./pulse.js";
|
|
26
30
|
import { Radar, RadarProps } from "./radar.js";
|
|
27
31
|
import { Ring, RingProps } from "./ring.js";
|
|
28
32
|
import { DEFAULT_RIPPLE_DIRECTION, Ripple, RippleDirection, RippleProps } from "./ripple.js";
|
|
33
|
+
import { Scan } from "./scan.js";
|
|
29
34
|
import { Slide } from "./slide.js";
|
|
30
35
|
import { Snake, SnakeProps } from "./snake.js";
|
|
36
|
+
import { Split } from "./split.js";
|
|
37
|
+
import { Steps } from "./steps.js";
|
|
31
38
|
import { Swirl } from "./swirl.js";
|
|
32
39
|
import { Trace, TraceProps } from "./trace.js";
|
|
33
40
|
import { DEFAULT_WAVE_ORIGIN, Wave, WaveOrigin, WaveProps } from "./wave.js";
|
|
34
41
|
import { SPINNERS } from "./spinners.js";
|
|
35
|
-
export { Arc, type ArcProps, Atom, type AtomProps, Blocks, type BlocksProps, type BlocksSweep, BouncingDots, type Cap, type CapProps, Cascade, type CascadeProps, CircularDots, Classic, ClassicV2, Clock, type ClockProps, Comet, type CometProps, Compass, DEFAULT_BLOCKS_SWEEP, DEFAULT_CAP, DEFAULT_EASING, DEFAULT_RIPPLE_DIRECTION, DEFAULT_WAVE_ORIGIN, DURATION_VAR, Dual, type DualProps, type Easing, type EasingProps, Eclipse, Flip, Gather, Leap, LinearDots, Loading, Morph, Orbit, type OrbitProps, PLAY_STATE_VAR, Pulse, Radar, type RadarProps, Ring, type RingProps, Ripple, type RippleDirection, type RippleProps, SPINNERS, SPINNER_MOTION, Slide, Snake, type SnakeProps, type SpinnerName, type SpinnerProps, Swirl, Trace, type TraceProps, Wave, type WaveOrigin, type WaveProps };
|
|
42
|
+
export { Arc, type ArcProps, Atom, type AtomProps, Blocks, type BlocksProps, type BlocksSweep, BouncingDots, type Cap, type CapProps, Cascade, type CascadeProps, Chevrons, CircularDots, Classic, ClassicV2, Clock, type ClockProps, Comet, type CometProps, Compass, DEFAULT_BLOCKS_SWEEP, DEFAULT_CAP, DEFAULT_EASING, DEFAULT_RIPPLE_DIRECTION, DEFAULT_WAVE_ORIGIN, DURATION_VAR, Dual, type DualProps, type Easing, type EasingProps, Eclipse, Fill, Flip, Gather, Leap, LinearDots, Loading, Loop, type LoopProps, Morph, Orbit, type OrbitProps, PLAY_STATE_VAR, Phases, Pulse, Radar, type RadarProps, Ring, type RingProps, Ripple, type RippleDirection, type RippleProps, SPINNERS, SPINNER_MOTION, Scan, Slide, Snake, type SnakeProps, type SpinnerName, type SpinnerProps, Split, Steps, Swirl, Trace, type TraceProps, Wave, type WaveOrigin, type WaveProps };
|
package/dist/index.js
CHANGED
|
@@ -6,6 +6,7 @@ import { Atom } from "./atom.js";
|
|
|
6
6
|
import { Blocks, DEFAULT_BLOCKS_SWEEP } from "./blocks.js";
|
|
7
7
|
import { BouncingDots } from "./bouncing-dots.js";
|
|
8
8
|
import { Cascade } from "./cascade.js";
|
|
9
|
+
import { Chevrons } from "./chevrons.js";
|
|
9
10
|
import { CircularDots } from "./circular-dots.js";
|
|
10
11
|
import { ClassicV2 } from "./classic-v2.js";
|
|
11
12
|
import { Classic } from "./classic.js";
|
|
@@ -14,21 +15,27 @@ import { Comet } from "./comet.js";
|
|
|
14
15
|
import { Compass } from "./compass.js";
|
|
15
16
|
import { Dual } from "./dual.js";
|
|
16
17
|
import { Eclipse } from "./eclipse.js";
|
|
18
|
+
import { Fill } from "./fill.js";
|
|
17
19
|
import { Flip } from "./flip.js";
|
|
18
20
|
import { Gather } from "./gather.js";
|
|
19
21
|
import { Leap } from "./leap.js";
|
|
20
22
|
import { LinearDots } from "./linear-dots.js";
|
|
21
23
|
import { Loading } from "./loading.js";
|
|
24
|
+
import { Loop } from "./loop.js";
|
|
22
25
|
import { Morph } from "./morph.js";
|
|
23
26
|
import { Orbit } from "./orbit.js";
|
|
27
|
+
import { Phases } from "./phases.js";
|
|
24
28
|
import { Pulse } from "./pulse.js";
|
|
25
29
|
import { Radar } from "./radar.js";
|
|
26
30
|
import { Ring } from "./ring.js";
|
|
27
31
|
import { DEFAULT_RIPPLE_DIRECTION, Ripple } from "./ripple.js";
|
|
32
|
+
import { Scan } from "./scan.js";
|
|
28
33
|
import { Slide } from "./slide.js";
|
|
29
34
|
import { Snake } from "./snake.js";
|
|
35
|
+
import { Split } from "./split.js";
|
|
36
|
+
import { Steps } from "./steps.js";
|
|
30
37
|
import { Swirl } from "./swirl.js";
|
|
31
38
|
import { Trace } from "./trace.js";
|
|
32
39
|
import { DEFAULT_WAVE_ORIGIN, Wave } from "./wave.js";
|
|
33
40
|
import { SPINNERS } from "./spinners.js";
|
|
34
|
-
export { Arc, Atom, Blocks, BouncingDots, Cascade, CircularDots, Classic, ClassicV2, Clock, Comet, Compass, DEFAULT_BLOCKS_SWEEP, DEFAULT_CAP, DEFAULT_EASING, DEFAULT_RIPPLE_DIRECTION, DEFAULT_WAVE_ORIGIN, DURATION_VAR, Dual, Eclipse, Flip, Gather, Leap, LinearDots, Loading, Morph, Orbit, PLAY_STATE_VAR, Pulse, Radar, Ring, Ripple, SPINNERS, SPINNER_MOTION, Slide, Snake, Swirl, Trace, Wave };
|
|
41
|
+
export { Arc, Atom, Blocks, BouncingDots, Cascade, Chevrons, CircularDots, Classic, ClassicV2, Clock, Comet, Compass, DEFAULT_BLOCKS_SWEEP, DEFAULT_CAP, DEFAULT_EASING, DEFAULT_RIPPLE_DIRECTION, DEFAULT_WAVE_ORIGIN, DURATION_VAR, Dual, Eclipse, Fill, Flip, Gather, Leap, LinearDots, Loading, Loop, Morph, Orbit, PLAY_STATE_VAR, Phases, Pulse, Radar, Ring, Ripple, SPINNERS, SPINNER_MOTION, Scan, Slide, Snake, Split, Steps, Swirl, Trace, Wave };
|
package/dist/leap.d.ts
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
import { t as SpinnerProps } from "./types-
|
|
2
|
-
|
|
3
|
-
export declare function Leap(props: SpinnerProps): import("react").JSX.Element;
|
|
4
|
-
//#endregion
|
|
1
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
2
|
+
export declare function Leap(props: SpinnerProps): import("react").JSX.Element;
|
package/dist/leap.js
CHANGED
|
@@ -2,7 +2,7 @@ import { SIZE, STEP_VAR, animation, stagger } from "./motion.js";
|
|
|
2
2
|
import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
import { createElement } from "react";
|
|
5
|
-
|
|
5
|
+
// src/leap.tsx
|
|
6
6
|
const DOTS = Array.from({ length: 3 }, (_, index) => index);
|
|
7
7
|
const css = `
|
|
8
8
|
.ld-leap {
|
|
@@ -63,5 +63,4 @@ function Leap(props) {
|
|
|
63
63
|
children: /* @__PURE__ */ jsx("div", { className: "ld-leap-dot" })
|
|
64
64
|
}, index)))] });
|
|
65
65
|
}
|
|
66
|
-
//#endregion
|
|
67
66
|
export { Leap };
|
package/dist/linear-dots.d.ts
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
import { t as SpinnerProps } from "./types-
|
|
2
|
-
|
|
3
|
-
export declare function LinearDots(props: SpinnerProps): import("react").JSX.Element;
|
|
4
|
-
//#endregion
|
|
1
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
2
|
+
export declare function LinearDots(props: SpinnerProps): import("react").JSX.Element;
|
package/dist/linear-dots.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SIZE, animation, stagger } from "./motion.js";
|
|
2
2
|
import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
|
|
4
|
+
// src/linear-dots.tsx
|
|
5
5
|
const DOTS = Array.from({ length: 3 }, (_, index) => index);
|
|
6
6
|
const css = `
|
|
7
7
|
.ld-linear-dots {
|
|
@@ -50,5 +50,4 @@ function LinearDots(props) {
|
|
|
50
50
|
}, dot))
|
|
51
51
|
})] });
|
|
52
52
|
}
|
|
53
|
-
//#endregion
|
|
54
53
|
export { LinearDots };
|
package/dist/loading.d.ts
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
import { t as SpinnerProps } from "./types-
|
|
2
|
-
|
|
3
|
-
export declare function Loading(props: SpinnerProps): import("react").JSX.Element;
|
|
4
|
-
//#endregion
|
|
1
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
2
|
+
export declare function Loading(props: SpinnerProps): import("react").JSX.Element;
|
package/dist/loading.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
|
|
2
2
|
import { fadeCss } from "./fade.js";
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
|
|
4
|
+
// src/loading.tsx
|
|
5
5
|
const BLOCK = "M0 0h1v1H0zM2 0h1v1H2zM0 2h1v1H0zM2 2h1v1H2z";
|
|
6
6
|
const SEGMENTS = [
|
|
7
7
|
{
|
|
@@ -60,5 +60,4 @@ function Loading(props) {
|
|
|
60
60
|
}, `${x}-${y}`))
|
|
61
61
|
})] });
|
|
62
62
|
}
|
|
63
|
-
//#endregion
|
|
64
63
|
export { Loading };
|
package/dist/loop.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { n as CapProps } from "./cap-B_Mo1a7N.js";
|
|
2
|
+
import { r as EasingProps } from "./easing-BM_1QWrA.js";
|
|
3
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
4
|
+
export interface LoopProps extends SpinnerProps, EasingProps, CapProps {}
|
|
5
|
+
export declare function Loop({ cap, easing, ...rest }: LoopProps): import("react").JSX.Element;
|
package/dist/loop.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { linecap } from "./cap.js";
|
|
2
|
+
import { rotationCss, spinClass } from "./easing.js";
|
|
3
|
+
import { SpinnerStyle, spinnerRoot } from "./frame.js";
|
|
4
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
// src/loop.tsx
|
|
6
|
+
const PATH = "M12 12c-2-2.7-3.6-4-5.5-4a4 4 0 0 0 0 8c1.9 0 3.5-1.3 5.5-4s3.6-4 5.5-4a4 4 0 0 1 0 8c-1.9 0-3.5-1.3-5.5-4z";
|
|
7
|
+
const LENGTH = 100;
|
|
8
|
+
const DASH = 30;
|
|
9
|
+
const css = `
|
|
10
|
+
${rotationCss("loop", `to {
|
|
11
|
+
stroke-dashoffset: -100;
|
|
12
|
+
}`)}
|
|
13
|
+
`;
|
|
14
|
+
function Loop({ cap, easing, ...rest }) {
|
|
15
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
|
|
16
|
+
name: "loop",
|
|
17
|
+
children: css
|
|
18
|
+
}), /* @__PURE__ */ jsxs("svg", {
|
|
19
|
+
...spinnerRoot("loop", rest),
|
|
20
|
+
fill: "none",
|
|
21
|
+
role: "presentation",
|
|
22
|
+
stroke: "currentColor",
|
|
23
|
+
strokeWidth: "2.5",
|
|
24
|
+
viewBox: "0 0 24 24",
|
|
25
|
+
children: [/* @__PURE__ */ jsx("path", {
|
|
26
|
+
d: PATH,
|
|
27
|
+
opacity: "0.2"
|
|
28
|
+
}), /* @__PURE__ */ jsx("path", {
|
|
29
|
+
className: spinClass("loop", easing),
|
|
30
|
+
d: PATH,
|
|
31
|
+
pathLength: LENGTH,
|
|
32
|
+
strokeDasharray: `${DASH} 70`,
|
|
33
|
+
strokeLinecap: linecap(cap)
|
|
34
|
+
})]
|
|
35
|
+
})] });
|
|
36
|
+
}
|
|
37
|
+
export { Loop };
|
package/dist/morph.d.ts
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
import { t as SpinnerProps } from "./types-
|
|
2
|
-
|
|
3
|
-
export declare function Morph(props: SpinnerProps): import("react").JSX.Element;
|
|
4
|
-
//#endregion
|
|
1
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
2
|
+
export declare function Morph(props: SpinnerProps): import("react").JSX.Element;
|
package/dist/morph.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SIZE, animation } from "./motion.js";
|
|
2
2
|
import { SpinnerStyle, spinnerRoot } from "./frame.js";
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
|
|
4
|
+
// src/morph.tsx
|
|
5
5
|
const css = `
|
|
6
6
|
.ld-morph-shape {
|
|
7
7
|
width: 64%;
|
|
@@ -36,5 +36,4 @@ function Morph(props) {
|
|
|
36
36
|
children: /* @__PURE__ */ jsx("div", { className: "ld-morph-shape" })
|
|
37
37
|
})] });
|
|
38
38
|
}
|
|
39
|
-
//#endregion
|
|
40
39
|
export { Morph };
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
//#region src/motion.d.ts
|
|
2
1
|
declare const DURATION_VAR = "--ld-duration";
|
|
3
2
|
declare const PLAY_STATE_VAR = "--ld-play-state";
|
|
4
3
|
declare const SIZE_VAR = "--ld-size";
|
|
@@ -11,6 +10,7 @@ declare const SPINNER_MOTION: {
|
|
|
11
10
|
readonly blocks: 1300;
|
|
12
11
|
readonly "bouncing-dots": 500;
|
|
13
12
|
readonly cascade: 1500;
|
|
13
|
+
readonly chevrons: 1000;
|
|
14
14
|
readonly "circular-dots": 800;
|
|
15
15
|
readonly classic: 1200;
|
|
16
16
|
readonly "classic-v2": 800;
|
|
@@ -19,19 +19,25 @@ declare const SPINNER_MOTION: {
|
|
|
19
19
|
readonly compass: 500;
|
|
20
20
|
readonly dual: 1000;
|
|
21
21
|
readonly eclipse: 1200;
|
|
22
|
+
readonly fill: 1600;
|
|
22
23
|
readonly flip: 1200;
|
|
23
24
|
readonly gather: 1600;
|
|
24
25
|
readonly leap: 1800;
|
|
25
26
|
readonly "linear-dots": 900;
|
|
26
27
|
readonly loading: 1000;
|
|
28
|
+
readonly loop: 1600;
|
|
27
29
|
readonly morph: 1200;
|
|
28
30
|
readonly orbit: 750;
|
|
31
|
+
readonly phases: 3000;
|
|
29
32
|
readonly pulse: 1200;
|
|
30
33
|
readonly radar: 1500;
|
|
31
34
|
readonly ring: 800;
|
|
32
35
|
readonly ripple: 1200;
|
|
36
|
+
readonly scan: 1800;
|
|
33
37
|
readonly slide: 2400;
|
|
34
38
|
readonly snake: 1400;
|
|
39
|
+
readonly split: 1400;
|
|
40
|
+
readonly steps: 1600;
|
|
35
41
|
readonly swirl: 1200;
|
|
36
42
|
readonly trace: 1200;
|
|
37
43
|
readonly wave: 900;
|
|
@@ -41,5 +47,4 @@ declare function duration(name: SpinnerName): string;
|
|
|
41
47
|
declare function stagger(name: SpinnerName, count: number): string;
|
|
42
48
|
declare const PLAY_STATE = "var(--ld-play-state, running)";
|
|
43
49
|
declare function animation(name: SpinnerName, keyframes: string | string[], timing: string): string;
|
|
44
|
-
//#endregion
|
|
45
50
|
export { SIZE as a, STEP_VAR as c, duration as d, stagger as f, PLAY_STATE_VAR as i, SpinnerName as l, DURATION_VAR as n, SIZE_VAR as o, PLAY_STATE as r, SPINNER_MOTION as s, DEFAULT_SIZE as t, animation as u };
|
package/dist/motion.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as SIZE, c as STEP_VAR, d as duration, f as stagger, i as PLAY_STATE_VAR, l as SpinnerName, n as DURATION_VAR, o as SIZE_VAR, r as PLAY_STATE, s as SPINNER_MOTION, t as DEFAULT_SIZE, u as animation } from "./motion-
|
|
1
|
+
import { a as SIZE, c as STEP_VAR, d as duration, f as stagger, i as PLAY_STATE_VAR, l as SpinnerName, n as DURATION_VAR, o as SIZE_VAR, r as PLAY_STATE, s as SPINNER_MOTION, t as DEFAULT_SIZE, u as animation } from "./motion-trIEyOxA.js";
|
|
2
2
|
export { DEFAULT_SIZE, DURATION_VAR, PLAY_STATE, PLAY_STATE_VAR, SIZE, SIZE_VAR, SPINNER_MOTION, STEP_VAR, SpinnerName, animation, duration, stagger };
|
package/dist/motion.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// src/motion.ts
|
|
2
2
|
const DURATION_VAR = "--ld-duration";
|
|
3
3
|
const PLAY_STATE_VAR = "--ld-play-state";
|
|
4
4
|
const SIZE_VAR = "--ld-size";
|
|
@@ -11,6 +11,7 @@ const SPINNER_MOTION = {
|
|
|
11
11
|
blocks: 1300,
|
|
12
12
|
"bouncing-dots": 500,
|
|
13
13
|
cascade: 1500,
|
|
14
|
+
chevrons: 1e3,
|
|
14
15
|
"circular-dots": 800,
|
|
15
16
|
classic: 1200,
|
|
16
17
|
"classic-v2": 800,
|
|
@@ -19,19 +20,25 @@ const SPINNER_MOTION = {
|
|
|
19
20
|
compass: 500,
|
|
20
21
|
dual: 1e3,
|
|
21
22
|
eclipse: 1200,
|
|
23
|
+
fill: 1600,
|
|
22
24
|
flip: 1200,
|
|
23
25
|
gather: 1600,
|
|
24
26
|
leap: 1800,
|
|
25
27
|
"linear-dots": 900,
|
|
26
28
|
loading: 1e3,
|
|
29
|
+
loop: 1600,
|
|
27
30
|
morph: 1200,
|
|
28
31
|
orbit: 750,
|
|
32
|
+
phases: 3e3,
|
|
29
33
|
pulse: 1200,
|
|
30
34
|
radar: 1500,
|
|
31
35
|
ring: 800,
|
|
32
36
|
ripple: 1200,
|
|
37
|
+
scan: 1800,
|
|
33
38
|
slide: 2400,
|
|
34
39
|
snake: 1400,
|
|
40
|
+
split: 1400,
|
|
41
|
+
steps: 1600,
|
|
35
42
|
swirl: 1200,
|
|
36
43
|
trace: 1200,
|
|
37
44
|
wave: 900
|
|
@@ -47,5 +54,4 @@ function animation(name, keyframes, timing) {
|
|
|
47
54
|
return `animation: ${[keyframes].flat().map((frames) => `${frames} ${duration(name)} ${timing} infinite`).join(", ")};
|
|
48
55
|
animation-play-state: ${PLAY_STATE};`;
|
|
49
56
|
}
|
|
50
|
-
//#endregion
|
|
51
57
|
export { DEFAULT_SIZE, DURATION_VAR, PLAY_STATE, PLAY_STATE_VAR, SIZE, SIZE_VAR, SPINNER_MOTION, STEP_VAR, animation, duration, stagger };
|
package/dist/orbit.d.ts
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import { r as EasingProps } from "./easing-
|
|
2
|
-
import { t as SpinnerProps } from "./types-
|
|
3
|
-
//#region src/orbit.d.ts
|
|
1
|
+
import { r as EasingProps } from "./easing-BM_1QWrA.js";
|
|
2
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
4
3
|
export interface OrbitProps extends SpinnerProps, EasingProps {}
|
|
5
|
-
export declare function Orbit({ easing, ...rest }: OrbitProps): import("react").JSX.Element;
|
|
6
|
-
//#endregion
|
|
4
|
+
export declare function Orbit({ easing, ...rest }: OrbitProps): import("react").JSX.Element;
|
package/dist/orbit.js
CHANGED
|
@@ -2,7 +2,7 @@ import { SIZE } from "./motion.js";
|
|
|
2
2
|
import { rotationCss, spinClass } from "./easing.js";
|
|
3
3
|
import { SpinnerStyle, spinnerRoot } from "./frame.js";
|
|
4
4
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
|
|
5
|
+
// src/orbit.tsx
|
|
6
6
|
const css = `
|
|
7
7
|
.ld-orbit {
|
|
8
8
|
--ld-orbit-stroke: calc(${SIZE} * 0.0625);
|
|
@@ -40,5 +40,4 @@ function Orbit({ easing, ...rest }) {
|
|
|
40
40
|
children: [/* @__PURE__ */ jsx("div", { className: "ld-orbit-dot" }), /* @__PURE__ */ jsx("div", { className: `ld-orbit-track ${spinClass("orbit", easing)}` })]
|
|
41
41
|
})] });
|
|
42
42
|
}
|
|
43
|
-
//#endregion
|
|
44
43
|
export { Orbit };
|
package/dist/phases.d.ts
ADDED
package/dist/phases.js
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { animation, duration } from "./motion.js";
|
|
2
|
+
import { SpinnerStyle, spinnerRoot } from "./frame.js";
|
|
3
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { useId } from "react";
|
|
5
|
+
// src/phases.tsx
|
|
6
|
+
const RADIUS = 10;
|
|
7
|
+
const css = `
|
|
8
|
+
.ld-phases-shade {
|
|
9
|
+
${animation("phases", "ld-phases-wax", "ease-out")}
|
|
10
|
+
animation-delay: calc(${duration("phases")} / -2);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@keyframes ld-phases-wax {
|
|
14
|
+
from {
|
|
15
|
+
transform: translateX(20.5px);
|
|
16
|
+
}
|
|
17
|
+
50% {
|
|
18
|
+
transform: translateX(0);
|
|
19
|
+
animation-timing-function: ease-in;
|
|
20
|
+
}
|
|
21
|
+
to {
|
|
22
|
+
transform: translateX(-20.5px);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@media (prefers-reduced-motion: reduce) {
|
|
27
|
+
.ld-phases-shade {
|
|
28
|
+
transform: translateX(-10px);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
`;
|
|
32
|
+
function Phases(props) {
|
|
33
|
+
const shade = useId();
|
|
34
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
|
|
35
|
+
name: "phases",
|
|
36
|
+
children: css
|
|
37
|
+
}), /* @__PURE__ */ jsxs("svg", {
|
|
38
|
+
...spinnerRoot("phases", props),
|
|
39
|
+
fill: "currentColor",
|
|
40
|
+
role: "presentation",
|
|
41
|
+
viewBox: "0 0 24 24",
|
|
42
|
+
children: [
|
|
43
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", {
|
|
44
|
+
id: shade,
|
|
45
|
+
children: [/* @__PURE__ */ jsx("circle", {
|
|
46
|
+
cx: "12",
|
|
47
|
+
cy: "12",
|
|
48
|
+
fill: "white",
|
|
49
|
+
r: RADIUS
|
|
50
|
+
}), /* @__PURE__ */ jsx("circle", {
|
|
51
|
+
className: "ld-phases-shade",
|
|
52
|
+
cx: "12",
|
|
53
|
+
cy: "12",
|
|
54
|
+
fill: "black",
|
|
55
|
+
r: 10.25
|
|
56
|
+
})]
|
|
57
|
+
}) }),
|
|
58
|
+
/* @__PURE__ */ jsx("circle", {
|
|
59
|
+
cx: "12",
|
|
60
|
+
cy: "12",
|
|
61
|
+
opacity: "0.2",
|
|
62
|
+
r: RADIUS
|
|
63
|
+
}),
|
|
64
|
+
/* @__PURE__ */ jsx("circle", {
|
|
65
|
+
cx: "12",
|
|
66
|
+
cy: "12",
|
|
67
|
+
mask: `url(#${shade})`,
|
|
68
|
+
r: RADIUS
|
|
69
|
+
})
|
|
70
|
+
]
|
|
71
|
+
})] });
|
|
72
|
+
}
|
|
73
|
+
export { Phases };
|
package/dist/pulse.d.ts
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
import { t as SpinnerProps } from "./types-
|
|
2
|
-
|
|
3
|
-
export declare function Pulse(props: SpinnerProps): import("react").JSX.Element;
|
|
4
|
-
//#endregion
|
|
1
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
2
|
+
export declare function Pulse(props: SpinnerProps): import("react").JSX.Element;
|
package/dist/pulse.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { animation } from "./motion.js";
|
|
2
2
|
import { SpinnerStyle, spinnerRoot } from "./frame.js";
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
|
|
4
|
+
// src/pulse.tsx
|
|
5
5
|
const css = `
|
|
6
6
|
.ld-pulse-ring {
|
|
7
7
|
transform-origin: center;
|
|
@@ -48,5 +48,4 @@ function Pulse(props) {
|
|
|
48
48
|
})]
|
|
49
49
|
})] });
|
|
50
50
|
}
|
|
51
|
-
//#endregion
|
|
52
51
|
export { Pulse };
|
package/dist/radar.d.ts
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import { r as EasingProps } from "./easing-
|
|
2
|
-
import { t as SpinnerProps } from "./types-
|
|
3
|
-
//#region src/radar.d.ts
|
|
1
|
+
import { r as EasingProps } from "./easing-BM_1QWrA.js";
|
|
2
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
4
3
|
export interface RadarProps extends SpinnerProps, EasingProps {}
|
|
5
|
-
export declare function Radar({ easing, ...rest }: RadarProps): import("react").JSX.Element;
|
|
6
|
-
//#endregion
|
|
4
|
+
export declare function Radar({ easing, ...rest }: RadarProps): import("react").JSX.Element;
|
package/dist/radar.js
CHANGED
|
@@ -2,7 +2,7 @@ import { rotationCss, spinClass } from "./easing.js";
|
|
|
2
2
|
import { SpinnerStyle, spinnerRoot } from "./frame.js";
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
import { useId } from "react";
|
|
5
|
-
|
|
5
|
+
// src/radar.tsx
|
|
6
6
|
const css = `
|
|
7
7
|
${rotationCss("radar")}
|
|
8
8
|
`;
|
|
@@ -60,5 +60,4 @@ function Radar({ easing, ...rest }) {
|
|
|
60
60
|
]
|
|
61
61
|
})] });
|
|
62
62
|
}
|
|
63
|
-
//#endregion
|
|
64
63
|
export { Radar };
|
package/dist/ring.d.ts
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import { n as CapProps } from "./cap-
|
|
2
|
-
import { r as EasingProps } from "./easing-
|
|
3
|
-
import { t as SpinnerProps } from "./types-
|
|
4
|
-
//#region src/ring.d.ts
|
|
1
|
+
import { n as CapProps } from "./cap-B_Mo1a7N.js";
|
|
2
|
+
import { r as EasingProps } from "./easing-BM_1QWrA.js";
|
|
3
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
5
4
|
export interface RingProps extends SpinnerProps, EasingProps, CapProps {}
|
|
6
|
-
export declare function Ring({ cap, easing, ...rest }: RingProps): import("react").JSX.Element;
|
|
7
|
-
//#endregion
|
|
5
|
+
export declare function Ring({ cap, easing, ...rest }: RingProps): import("react").JSX.Element;
|
package/dist/ring.js
CHANGED
|
@@ -2,7 +2,7 @@ import { linecap } from "./cap.js";
|
|
|
2
2
|
import { rotationCss, spinClass } from "./easing.js";
|
|
3
3
|
import { SpinnerStyle, spinnerRoot } from "./frame.js";
|
|
4
4
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
|
|
5
|
+
// src/ring.tsx
|
|
6
6
|
const css = `
|
|
7
7
|
${rotationCss("ring")}
|
|
8
8
|
`;
|
|
@@ -34,5 +34,4 @@ function Ring({ cap, easing, ...rest }) {
|
|
|
34
34
|
})]
|
|
35
35
|
})] });
|
|
36
36
|
}
|
|
37
|
-
//#endregion
|
|
38
37
|
export { Ring };
|
package/dist/ripple.d.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import { t as SpinnerProps } from "./types-
|
|
2
|
-
//#region src/ripple.d.ts
|
|
1
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
3
2
|
export type RippleDirection = "in" | "out";
|
|
4
3
|
export declare const DEFAULT_RIPPLE_DIRECTION: RippleDirection;
|
|
5
4
|
export interface RippleProps extends SpinnerProps {
|
|
6
5
|
direction?: RippleDirection;
|
|
7
6
|
}
|
|
8
|
-
export declare function Ripple({ direction, ...rest }: RippleProps): import("react").JSX.Element;
|
|
9
|
-
//#endregion
|
|
7
|
+
export declare function Ripple({ direction, ...rest }: RippleProps): import("react").JSX.Element;
|
package/dist/ripple.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SIZE, STEP_VAR, animation, stagger } from "./motion.js";
|
|
2
2
|
import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
|
|
4
|
+
// src/ripple.tsx
|
|
5
5
|
const DEFAULT_RIPPLE_DIRECTION = "out";
|
|
6
6
|
const RINGS = Array.from({ length: 3 }, (_, index) => index);
|
|
7
7
|
const css = `
|
|
@@ -53,5 +53,4 @@ function Ripple({ direction = "out", ...rest }) {
|
|
|
53
53
|
}, index))
|
|
54
54
|
})] });
|
|
55
55
|
}
|
|
56
|
-
//#endregion
|
|
57
56
|
export { DEFAULT_RIPPLE_DIRECTION, Ripple };
|
package/dist/scan.d.ts
ADDED
package/dist/scan.js
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { animation } from "./motion.js";
|
|
2
|
+
import { SpinnerStyle, spinnerRoot } from "./frame.js";
|
|
3
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
// src/scan.tsx
|
|
5
|
+
const TRAVEL = 11;
|
|
6
|
+
const css = `
|
|
7
|
+
.ld-scan-line {
|
|
8
|
+
${animation("scan", "ld-scan-sweep", "cubic-bezier(0.45, 0, 0.55, 1)")}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@keyframes ld-scan-sweep {
|
|
12
|
+
0%,
|
|
13
|
+
100% {
|
|
14
|
+
transform: translateY(0);
|
|
15
|
+
}
|
|
16
|
+
50% {
|
|
17
|
+
transform: translateY(${TRAVEL}px);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@media (prefers-reduced-motion: reduce) {
|
|
22
|
+
.ld-scan-line {
|
|
23
|
+
transform: translateY(${TRAVEL / 2}px);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
`;
|
|
27
|
+
function Scan(props) {
|
|
28
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
|
|
29
|
+
name: "scan",
|
|
30
|
+
children: css
|
|
31
|
+
}), /* @__PURE__ */ jsxs("svg", {
|
|
32
|
+
...spinnerRoot("scan", props),
|
|
33
|
+
fill: "none",
|
|
34
|
+
role: "presentation",
|
|
35
|
+
stroke: "currentColor",
|
|
36
|
+
viewBox: "0 0 24 24",
|
|
37
|
+
children: [/* @__PURE__ */ jsx("rect", {
|
|
38
|
+
height: "18",
|
|
39
|
+
opacity: "0.2",
|
|
40
|
+
rx: "4",
|
|
41
|
+
strokeWidth: "2",
|
|
42
|
+
width: "18",
|
|
43
|
+
x: "3",
|
|
44
|
+
y: "3"
|
|
45
|
+
}), /* @__PURE__ */ jsx("line", {
|
|
46
|
+
className: "ld-scan-line",
|
|
47
|
+
strokeLinecap: "round",
|
|
48
|
+
strokeWidth: "2.5",
|
|
49
|
+
x1: "7.5",
|
|
50
|
+
x2: "16.5",
|
|
51
|
+
y1: "6.5",
|
|
52
|
+
y2: "6.5"
|
|
53
|
+
})]
|
|
54
|
+
})] });
|
|
55
|
+
}
|
|
56
|
+
export { Scan };
|
package/dist/slide.d.ts
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
import { t as SpinnerProps } from "./types-
|
|
2
|
-
|
|
3
|
-
export declare function Slide(props: SpinnerProps): import("react").JSX.Element;
|
|
4
|
-
//#endregion
|
|
1
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
2
|
+
export declare function Slide(props: SpinnerProps): import("react").JSX.Element;
|
package/dist/slide.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { animation, stagger } from "./motion.js";
|
|
2
2
|
import { SpinnerStyle, cssVars, spinnerRoot, step } from "./frame.js";
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
|
|
4
|
+
// src/slide.tsx
|
|
5
5
|
const DOT = 34;
|
|
6
6
|
const MARGIN = 6;
|
|
7
7
|
const FAR = `${(54 / DOT * 100).toFixed(1)}%`;
|
|
@@ -70,5 +70,4 @@ function Slide(props) {
|
|
|
70
70
|
}, rest))
|
|
71
71
|
})] });
|
|
72
72
|
}
|
|
73
|
-
//#endregion
|
|
74
73
|
export { Slide };
|
package/dist/snake.d.ts
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import { n as CapProps } from "./cap-
|
|
2
|
-
import { r as EasingProps } from "./easing-
|
|
3
|
-
import { t as SpinnerProps } from "./types-
|
|
4
|
-
//#region src/snake.d.ts
|
|
1
|
+
import { n as CapProps } from "./cap-B_Mo1a7N.js";
|
|
2
|
+
import { r as EasingProps } from "./easing-BM_1QWrA.js";
|
|
3
|
+
import { t as SpinnerProps } from "./types-D9_cXnjI.js";
|
|
5
4
|
export interface SnakeProps extends SpinnerProps, EasingProps, CapProps {}
|
|
6
|
-
export declare function Snake({ cap, easing, ...rest }: SnakeProps): import("react").JSX.Element;
|
|
7
|
-
//#endregion
|
|
5
|
+
export declare function Snake({ cap, easing, ...rest }: SnakeProps): import("react").JSX.Element;
|
package/dist/snake.js
CHANGED
|
@@ -3,7 +3,7 @@ import { animation } from "./motion.js";
|
|
|
3
3
|
import { rotationCss, spinClass } from "./easing.js";
|
|
4
4
|
import { SpinnerStyle, spinnerRoot } from "./frame.js";
|
|
5
5
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
|
|
6
|
+
// src/snake.tsx
|
|
7
7
|
const css = `
|
|
8
8
|
${rotationCss("snake")}
|
|
9
9
|
|
|
@@ -55,5 +55,4 @@ function Snake({ cap, easing, ...rest }) {
|
|
|
55
55
|
})
|
|
56
56
|
})] });
|
|
57
57
|
}
|
|
58
|
-
//#endregion
|
|
59
58
|
export { Snake };
|