@rkosafo/cai.components 0.0.79 → 0.0.80
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.
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
interface PageLoader2Props extends HTMLAttributes<HTMLDivElement> {
|
|
6
|
+
/** Optional message below the spinner */
|
|
7
|
+
message?: string;
|
|
8
|
+
/** Use full-screen overlay (fixed, centered, dimmed background) */
|
|
9
|
+
fullScreen?: boolean;
|
|
10
|
+
/** Loader size in pixels */
|
|
11
|
+
size?: number;
|
|
12
|
+
/** Overlay background classes when fullScreen is true */
|
|
13
|
+
overlayColor?: string;
|
|
14
|
+
/** Static outer ring border color class */
|
|
15
|
+
ringBaseColor?: string;
|
|
16
|
+
/** Rotating outer ring accent classes */
|
|
17
|
+
ringOuterColor?: string;
|
|
18
|
+
/** Rotating inner ring accent classes */
|
|
19
|
+
ringInnerColor?: string;
|
|
20
|
+
/** Center dot and bounce dots color class */
|
|
21
|
+
dotColor?: string;
|
|
22
|
+
/** Message text color class */
|
|
23
|
+
textColor?: string;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
let {
|
|
27
|
+
message,
|
|
28
|
+
fullScreen = true,
|
|
29
|
+
size = 56,
|
|
30
|
+
overlayColor = 'bg-background/80',
|
|
31
|
+
ringBaseColor = 'border-muted',
|
|
32
|
+
ringOuterColor = 'border-t-accent border-r-accent/60',
|
|
33
|
+
ringInnerColor = 'border-b-primary border-l-primary/40',
|
|
34
|
+
dotColor = 'bg-accent',
|
|
35
|
+
textColor = 'text-muted-foreground',
|
|
36
|
+
class: className,
|
|
37
|
+
...restProps
|
|
38
|
+
}: PageLoader2Props = $props();
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<div
|
|
42
|
+
{...restProps}
|
|
43
|
+
class={clsx(
|
|
44
|
+
'flex flex-col items-center justify-center gap-6',
|
|
45
|
+
fullScreen && ['fixed inset-0 z-50 backdrop-blur-sm', overlayColor],
|
|
46
|
+
className
|
|
47
|
+
)}
|
|
48
|
+
role="status"
|
|
49
|
+
aria-live="polite"
|
|
50
|
+
aria-label={message ?? 'Loading'}
|
|
51
|
+
>
|
|
52
|
+
<div class="relative" style={`width: ${size}px; height: ${size}px;`} aria-hidden="true">
|
|
53
|
+
<div class={clsx('absolute inset-0 rounded-full border-2', ringBaseColor)}></div>
|
|
54
|
+
<div
|
|
55
|
+
class={clsx(
|
|
56
|
+
'absolute inset-0 rounded-full border-2 border-transparent animate-[spin_0.8s_linear_infinite]',
|
|
57
|
+
ringOuterColor
|
|
58
|
+
)}
|
|
59
|
+
></div>
|
|
60
|
+
<div
|
|
61
|
+
class={clsx(
|
|
62
|
+
'absolute inset-1 rounded-full border-2 border-transparent animate-[spin_1.2s_linear_infinite_reverse]',
|
|
63
|
+
ringInnerColor
|
|
64
|
+
)}
|
|
65
|
+
></div>
|
|
66
|
+
<div class="absolute inset-0 flex items-center justify-center">
|
|
67
|
+
<div class={clsx('h-2 w-2 rounded-full animate-pulse', dotColor)}></div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
{#if message}
|
|
72
|
+
<div class="flex flex-col items-center gap-2">
|
|
73
|
+
<p class={clsx('text-sm font-medium', textColor)}>{message}</p>
|
|
74
|
+
<div class="flex gap-1.5" aria-hidden="true">
|
|
75
|
+
<span
|
|
76
|
+
class={clsx(
|
|
77
|
+
'h-1.5 w-1.5 rounded-full animate-[page-loader-bounce_1.4s_ease-in-out_infinite_both]',
|
|
78
|
+
dotColor
|
|
79
|
+
)}
|
|
80
|
+
style="animation-delay: 0ms;"
|
|
81
|
+
></span>
|
|
82
|
+
<span
|
|
83
|
+
class={clsx(
|
|
84
|
+
'h-1.5 w-1.5 rounded-full animate-[page-loader-bounce_1.4s_ease-in-out_infinite_both]',
|
|
85
|
+
dotColor
|
|
86
|
+
)}
|
|
87
|
+
style="animation-delay: 160ms;"
|
|
88
|
+
></span>
|
|
89
|
+
<span
|
|
90
|
+
class={clsx(
|
|
91
|
+
'h-1.5 w-1.5 rounded-full animate-[page-loader-bounce_1.4s_ease-in-out_infinite_both]',
|
|
92
|
+
dotColor
|
|
93
|
+
)}
|
|
94
|
+
style="animation-delay: 320ms;"
|
|
95
|
+
></span>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
{/if}
|
|
99
|
+
</div>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
interface PageLoader2Props extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/** Optional message below the spinner */
|
|
4
|
+
message?: string;
|
|
5
|
+
/** Use full-screen overlay (fixed, centered, dimmed background) */
|
|
6
|
+
fullScreen?: boolean;
|
|
7
|
+
/** Loader size in pixels */
|
|
8
|
+
size?: number;
|
|
9
|
+
/** Overlay background classes when fullScreen is true */
|
|
10
|
+
overlayColor?: string;
|
|
11
|
+
/** Static outer ring border color class */
|
|
12
|
+
ringBaseColor?: string;
|
|
13
|
+
/** Rotating outer ring accent classes */
|
|
14
|
+
ringOuterColor?: string;
|
|
15
|
+
/** Rotating inner ring accent classes */
|
|
16
|
+
ringInnerColor?: string;
|
|
17
|
+
/** Center dot and bounce dots color class */
|
|
18
|
+
dotColor?: string;
|
|
19
|
+
/** Message text color class */
|
|
20
|
+
textColor?: string;
|
|
21
|
+
}
|
|
22
|
+
declare const PageLoader2: import("svelte").Component<PageLoader2Props, {}, "">;
|
|
23
|
+
type PageLoader2 = ReturnType<typeof PageLoader2>;
|
|
24
|
+
export default PageLoader2;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default as PageLoader } from
|
|
1
|
+
export { default as PageLoader } from './PageLoader.svelte';
|
|
2
|
+
export { default as PageLoader2 } from './PageLoader2.svelte';
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default as PageLoader } from
|
|
1
|
+
export { default as PageLoader } from './PageLoader.svelte';
|
|
2
|
+
export { default as PageLoader2 } from './PageLoader2.svelte';
|