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

A collection of tools for modern JavaScript development

const templateResponse = await fetch('/public/av-progress.html')

const template = new DOMParser().parseFromString(await templateResponse.text(), 'text/html').querySelector('template')

class AVProgress extends HTMLElement {
	#value = 0
	constructor() {
		super()
		this.attachShadow({ mode: 'open' })
		const { content } = template
		this.shadowRoot.appendChild(content.cloneNode(true))
	}

	set value(value) {
		this.#value = value
		const circle = this.shadowRoot.getElementById('progress-circle')
		const roundedPercentage = Math.min(100, Math.max(0, Math.round(value * 100)))
		circle.style.strokeDasharray = `${roundedPercentage} ${100 - roundedPercentage}`
		if (roundedPercentage == 100) {
			circle.classList.add('full')
		}
	}

	get value() {
		return this.#value
	}
}

customElements.define('av-progress', AVProgress)