44 lines
1011 B
Svelte
44 lines
1011 B
Svelte
<script lang="ts">
|
|
export let progress: number = 0;
|
|
export let step1: string;
|
|
export let step2: string;
|
|
export let step3: string;
|
|
</script>
|
|
|
|
|
|
|
|
<div class="grid grid-cols-3 self-start">
|
|
|
|
<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>
|
|
<div class="phase justify-self-start">
|
|
<div class="{step1} point">1</div>
|
|
<div class="">Gebäudedaten</div>
|
|
</div>
|
|
|
|
<div class="phase">
|
|
<div class="{step2} point">2</div>
|
|
<div class="">Kundendaten</div>
|
|
</div>
|
|
|
|
<div class="phase justify-self-end">
|
|
<div class="{step3} point">3</div>
|
|
<div class="">Kaufbestätigung</div>
|
|
</div>
|
|
|
|
</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;}
|
|
.step{@apply bg-secondary}
|
|
}
|
|
|
|
</style> |