luke-else.co.uk/src/lib/components/SkillProgress.svelte

16 lines
496 B
Svelte

<script lang="ts">
export let value: number = 0; // 0 to 100
</script>
<div class="w-full mt-3">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium">Competency Level</span>
<span class="text-sm font-medium">{value}%</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-5">
<div
class="bg-orange-400 h-5 rounded-full transition-all duration-500"
style="width: {value}%"
></div>
</div>
</div>