hamzus-ui 0.0.201 → 0.0.202
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/index.d.ts
CHANGED
|
@@ -49,6 +49,7 @@ export { default as Object } from "./src/components/hamzus-ui/Object/Object.svel
|
|
|
49
49
|
export * as ResponsiveTable from "./src/components/hamzus-ui/ResponsiveTable"
|
|
50
50
|
export { default as Skeleton } from "./src/components/hamzus-ui/Skeleton/Skeleton.svelte"
|
|
51
51
|
export { default as LineLoader } from "./src/components/hamzus-ui/LineLoader/LineLoader.svelte"
|
|
52
|
+
export { default as RotativeLoader } from "./src/components/hamzus-ui/RotativeLoader/RotativeLoader.svelte"
|
|
52
53
|
export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte"
|
|
53
54
|
|
|
54
55
|
// graphique
|
package/index.js
CHANGED
|
@@ -46,6 +46,8 @@ export { default as Object } from "./src/components/hamzus-ui/Object/Object.svel
|
|
|
46
46
|
export * as ResponsiveTable from "./src/components/hamzus-ui/ResponsiveTable"
|
|
47
47
|
export { default as Skeleton } from "./src/components/hamzus-ui/Skeleton/Skeleton.svelte"
|
|
48
48
|
export { default as LineLoader } from "./src/components/hamzus-ui/LineLoader/LineLoader.svelte"
|
|
49
|
+
export { default as RotativeLoader } from "./src/components/hamzus-ui/RotativeLoader/RotativeLoader.svelte"
|
|
50
|
+
export { default as LineLoader } from "./src/components/hamzus-ui/LineLoader/LineLoader.svelte"
|
|
49
51
|
export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte"
|
|
50
52
|
|
|
51
53
|
// graphique
|
package/package.json
CHANGED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
/**
|
|
3
|
+
* Loader.svelte — Composant spinner rotatif élégant
|
|
4
|
+
*
|
|
5
|
+
* Props :
|
|
6
|
+
* size {number} Diamètre en px (défaut : 48)
|
|
7
|
+
* thickness {number} Épaisseur du trait en px (défaut : 4)
|
|
8
|
+
* color {string} Couleur active (défaut : '#6366f1')
|
|
9
|
+
* track {string} Couleur de la piste (défaut : '#e2e8f0')
|
|
10
|
+
* speed {string} Durée d'un tour CSS (défaut : '0.9s')
|
|
11
|
+
*/
|
|
12
|
+
export let size = 24;
|
|
13
|
+
export let thickness = 3;
|
|
14
|
+
export let color = 'var(--accent)';
|
|
15
|
+
export let track = 'var(--accent-b)';
|
|
16
|
+
export let speed = '0.9s';
|
|
17
|
+
|
|
18
|
+
$: r = (size - thickness) / 2;
|
|
19
|
+
$: cx = size / 2;
|
|
20
|
+
$: cy = size / 2;
|
|
21
|
+
$: circum = 2 * Math.PI * r;
|
|
22
|
+
$: dashArr = `${circum * 0.72} ${circum * 0.28}`;
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<span
|
|
26
|
+
class="loader-root"
|
|
27
|
+
role="status"
|
|
28
|
+
aria-label="Chargement…"
|
|
29
|
+
style="
|
|
30
|
+
--size: {size}px;
|
|
31
|
+
--thickness: {thickness}px;
|
|
32
|
+
--color: {color};
|
|
33
|
+
--track: {track};
|
|
34
|
+
--speed: {speed};
|
|
35
|
+
"
|
|
36
|
+
>
|
|
37
|
+
<svg width={size} height={size} viewBox="0 0 {size} {size}" fill="none" aria-hidden="true">
|
|
38
|
+
<!-- Piste de fond -->
|
|
39
|
+
<circle {cx} {cy} {r} stroke={track} stroke-width={thickness} stroke-linecap="round" />
|
|
40
|
+
|
|
41
|
+
<!-- Arc animé -->
|
|
42
|
+
<circle
|
|
43
|
+
class="arc"
|
|
44
|
+
{cx}
|
|
45
|
+
{cy}
|
|
46
|
+
{r}
|
|
47
|
+
stroke={color}
|
|
48
|
+
stroke-width={thickness}
|
|
49
|
+
stroke-linecap="round"
|
|
50
|
+
stroke-dasharray={dashArr}
|
|
51
|
+
stroke-dashoffset="0"
|
|
52
|
+
transform="rotate(-90 {cx} {cy})"
|
|
53
|
+
/>
|
|
54
|
+
</svg>
|
|
55
|
+
</span>
|
|
56
|
+
|
|
57
|
+
<style>
|
|
58
|
+
.loader-root {
|
|
59
|
+
display: inline-flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
width: var(--size);
|
|
63
|
+
height: var(--size);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.arc {
|
|
67
|
+
animation:
|
|
68
|
+
spin var(--speed) linear infinite;
|
|
69
|
+
transform-origin: center;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@keyframes spin {
|
|
73
|
+
from {
|
|
74
|
+
transform: rotate(0deg);
|
|
75
|
+
}
|
|
76
|
+
to {
|
|
77
|
+
transform: rotate(360deg);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* légère pulsation de l'opacité pour l'effet "vivant" */
|
|
82
|
+
@keyframes pulse {
|
|
83
|
+
0%,
|
|
84
|
+
100% {
|
|
85
|
+
opacity: 1;
|
|
86
|
+
}
|
|
87
|
+
50% {
|
|
88
|
+
opacity: 0.65;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
</style>
|
package/src/utils/const.js
CHANGED