54 lines
1.0 KiB
Svelte
54 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
export let steps: string[] = [
|
|
"Gebäudedaten",
|
|
"Kundendaten",
|
|
"Kaufbestätigung",
|
|
];
|
|
export let active: number;
|
|
export let progress: number = active / (steps.length - 1) * 100;
|
|
</script>
|
|
|
|
<div class="grid grid-cols-3 self-start justify-between">
|
|
<div class="col-span-3 relative">
|
|
<div
|
|
class="w-[calc(100%-5rem)] ml-[2.5rem] absolute mt-[0.5rem] bg-gray-200 h-3 rounded-lg"
|
|
>
|
|
<div
|
|
class="bg-green-600 left-0 h-3 absolute"
|
|
style={`width: ${progress}%;`}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{#each steps as step, i}
|
|
<div class="phase">
|
|
<div class="point" class:active={i === active}>{i + 1}</div>
|
|
<div>{step}</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
|
|
|
|
<style lang="postcss">
|
|
.phase {
|
|
@apply grid grid-cols-1 items-center justify-items-center z-10;
|
|
.point {
|
|
@apply rounded-full w-8 h-8 text-white font-bold bg-gray-300 text-center pt-1 ring-white ring-4;
|
|
}
|
|
.active {
|
|
@apply bg-secondary;
|
|
}
|
|
}
|
|
|
|
:nth-child(1 of .phase) {
|
|
@apply justify-self-start;
|
|
}
|
|
|
|
.phase:last-of-type {
|
|
@apply justify-self-end;
|
|
}
|
|
</style>
|
|
|