This is a Svelte component for a circular progress bar, i.e. a "progress circle".
<script>
import { ProgressCircle } from "svelte-progress-circles"
</script>
<div class="circle-container">
<ProgressCircle progress={10} />
</div>
<style>
.circle-container {
width: 200px;
height: 200px;
font-size: 40px;
}
</style>
The chart will assume the full width and height of its container, and it MUST BE SQUARE (same width and height).
<ProgressCircle progress={0} text="" />
<ProgressCircle progress={25} text="1/4" />
<ProgressCircle progress={40} fgColor="#9acd32" bgColor="black" />
<ProgressCircle progress={60} fullness={50} />
<div>
<ProgressCircle progress={75} fullness={100} />
</div>
<style>
div {
width: 50px;
height: 50px;
font-size: 20px;
}
</style>