17 lines
567 B
Svelte
17 lines
567 B
Svelte
<script lang="ts">
|
|
export let value: number = 0; // 0 to 100
|
|
export let skillColour: string = 'bg-orange-400'; // Default color
|
|
</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="{skillColour} h-5 rounded-full transition-all duration-500"
|
|
style="width: {value}%"
|
|
></div>
|
|
</div>
|
|
</div> |