@applicvision/js-toolbox/src/av-test-browser/public/av-progress.html

A collection of tools for modern JavaScript development

<template>
	<style>
		:host {
			display: inline-block;
		}

		circle {
			fill: none;
			stroke: var(--color, red);
			stroke-width: 12;
			stroke-linecap: round;
			stroke-dashoffset: 25;
			transition: stroke-dasharray 0.2s, stroke 0.2s;
		}

		circle.full {
			stroke: none
		}

	</style>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
		<circle id="progress-circle" r="50" pathLength="100" stroke-dasharray="0 100" cx="60" cy="60" />
	</svg>
</template>