File size: 1,258 Bytes
11fcc5a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<script lang="ts">
import Skeleton from "$components/misc/Skeleton.svelte";
import type { CobaltQueueItemRunning, UUID } from "$lib/types/queue";
type Props = {
percentage?: number;
workerId: UUID;
pipelineResults: CobaltQueueItemRunning['pipelineResults'];
}
let { percentage = 0, workerId, pipelineResults }: Props = $props();
</script>
<div class="file-progress">
{#if percentage}
<div
class="progress"
style="width: {Math.min(100, percentage)}%"
></div>
{:else if pipelineResults[workerId]}
<div
class="progress"
style="width: 100%"
></div>
{:else}
<Skeleton
height="6px"
width="100%"
class="elevated indeterminate-progress"
/>
{/if}
</div>
<style>
.file-progress {
width: 100%;
background-color: var(--button-elevated);
}
.file-progress,
.file-progress .progress {
height: 6px;
border-radius: 10px;
transition: width 0.1s;
}
.file-progress :global(.indeterminate-progress) {
display: block;
}
.file-progress .progress {
background-color: var(--blue);
}
</style>
|