@celar-ui/svelte 0.0.2 → 0.0.3
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/dist/index.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ export { default as Dialog } from './overlay/Dialog.svelte';
|
|
|
12
12
|
export { default as Gap } from './misc/Gap.svelte';
|
|
13
13
|
export { default as DuckSpinner } from './misc/DuckSpinner.svelte';
|
|
14
14
|
export { default as DotSpinner } from './misc/DotSpinner.svelte';
|
|
15
|
+
export { default as LinearProgressIndicator } from './misc/LinearProgressIndicator.svelte';
|
|
15
16
|
export { default as TextInput } from './inputs/TextInput.svelte';
|
|
16
17
|
export { default as FileInput } from './inputs/FileInput.svelte';
|
|
17
18
|
export { default as ColorInput } from './inputs/ColorInput.svelte';
|
package/dist/index.js
CHANGED
|
@@ -13,6 +13,7 @@ export { default as Dialog } from './overlay/Dialog.svelte';
|
|
|
13
13
|
export { default as Gap } from './misc/Gap.svelte';
|
|
14
14
|
export { default as DuckSpinner } from './misc/DuckSpinner.svelte';
|
|
15
15
|
export { default as DotSpinner } from './misc/DotSpinner.svelte';
|
|
16
|
+
export { default as LinearProgressIndicator } from './misc/LinearProgressIndicator.svelte';
|
|
16
17
|
export { default as TextInput } from './inputs/TextInput.svelte';
|
|
17
18
|
export { default as FileInput } from './inputs/FileInput.svelte';
|
|
18
19
|
export { default as ColorInput } from './inputs/ColorInput.svelte';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
let props: HTMLAttributes<HTMLDivElement> = $props();
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<div {...props} data-linear-progress-indicator>
|
|
7
|
+
<div data-linear-progress-indicator-line></div>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<style>[data-linear-progress-indicator] {
|
|
11
|
+
--line-height: var(--gap--sm);
|
|
12
|
+
--anim-duration: 1.7s;
|
|
13
|
+
display: block;
|
|
14
|
+
position: relative;
|
|
15
|
+
background-color: var(--color-primary--lighter);
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: var(--line-height);
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
}
|
|
20
|
+
[data-linear-progress-indicator] [data-linear-progress-indicator-line] {
|
|
21
|
+
position: absolute;
|
|
22
|
+
top: 0;
|
|
23
|
+
left: 0;
|
|
24
|
+
animation: linear-progress-animation var(--anim-duration) linear infinite;
|
|
25
|
+
background-color: var(--color-primary--dark);
|
|
26
|
+
width: 0;
|
|
27
|
+
height: 100%;
|
|
28
|
+
}
|
|
29
|
+
@keyframes linear-progress-animation {
|
|
30
|
+
0% {
|
|
31
|
+
left: -8%;
|
|
32
|
+
width: 8%;
|
|
33
|
+
}
|
|
34
|
+
100% {
|
|
35
|
+
left: 100%;
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
}</style>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
declare const LinearProgressIndicator: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
|
|
3
|
+
type LinearProgressIndicator = ReturnType<typeof LinearProgressIndicator>;
|
|
4
|
+
export default LinearProgressIndicator;
|