ProgressBar-index.svelte

<script>
	import { fade } from 'svelte/transition';
	import { tweened } from 'svelte/motion';
	import { cubicOut } from 'svelte/easing';
	export let currentScore;

	const progress = tweened(0, {
		duration: 400,
		easing: cubicOut
	});

    $: {
        progress.set( currentScore / 20 * 100);
    }    
</script>

<svg id="progress-bar-svg">
    <defs>
        <path id="thumbs-up-path" d="M0 420.1h200v533.3H0zM996.5 573.7c-4.1-15-11.6-28.8-22-40.4 36.8-41.2 33.3-104.4-7.9-141.2-18.3-16.4-42.1-25.5-66.7-25.5H613.1l24.2-30.1c19-23.7 29.4-53.2 29.4-83.5V100c0-36.8-29.8-66.7-66.7-66.7-40.9 0-78.4 22.9-97.1 59.3L438 219.1 266.7 366.7v466.7c0 73.6 59.7 133.3 133.3 133.3h366.7c55.3 0 100-44.9 100-100.1 0-5.1-.4-10.3-1.2-15.3.8-5.9 1.2-11.9 1.2-17.9v-5.7c52.1-18.5 79.4-75.7 60.9-127.8l-1.2-3.3c53.2-14.6 84.6-69.6 70.1-122.9z"/>
    </defs>
    <rect id="progress-bar" height="100%" width="10px" rx=2.5 x=25></rect>
    <rect id="progress" 
          width="10px" 
          height="{Math.min($progress,100)}%" 
          x=25 
          y="calc(100% - {Math.min($progress,100)}%)" 
          rx=2.5>
    </rect>
    <line id="benchmark" x1=0 y1="calc(33.3%)" x2=60 y2="calc(33.3%)" stroke="{(currentScore>=10) ? "goldenrod" : "grey"}"></line>
   
    {#if currentScore >= 10}
        <svg class="icon-thumbs-up" in:fade="{{delay: 100, duration: 500}}" width="30px" fill="goldenrod" x=-10 y="calc(-16.66% - 20px)" viewBox="0 0 1000 1000"><use href="#thumbs-up-path"></use></svg>
    {/if}
    ...