This component uses only CSS to generate an animated semi circle percent based gauge. It will show the percentage digits within the arc of the semi circle together with an optional very short description. It will resize to it's parent container width and set it's height to half that width. You can pick the colors, the short text description and, of course the value between 0 - 100. The percentage display and optional text below will be resized as needed.

CHECK OUT THE ONLINE DEMO

<script>
    import Percentgauge from './percentgauge.svelte';
    let val = 0;
    let options = {
        thickness: 12,
        legend: 'Total',
        color: 'orangered',
        bgColor: '#bbb',
        valueOverflow: true,
        textColor: '#ffc0b5'
    };
</script>

<main>
    <div>
        <Percentgauge value={val} bind:options={options}></Percentgauge>         
    </div>
</main>

<style>
    div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 150px;
    }
    main {
        text-align: center;
        padding: 1em;
        max-width: 400px;
        margin: 0 auto;
    }
</style>

There are a few properties you can pass to this component:

Only tested on Svelte 3

This is so simple and has no dependencies that it doesn't need a NPM package. Just copy the file /src/percentgauge.svelte to your project's appropriate folder and import it where needed as you would with any .svelte file. All other files are just here for the sake of the example.

Download this code, extract it and run:

npm i
npm run dev