@keyframes progress-ring-indeterminate {
	0% {
		stroke-dasharray: 0.01px 43.97px;
		transform: rotate(0);
	}
	50% {
		stroke-dasharray: 21.99px 21.99px;
		transform: rotate(450deg);
	}
	100% {
		stroke-dasharray: 0.01px 43.97px;
		transform: rotate(1080deg);
	}
}

.progress-ring {
	outline: none;
	min-inline-size: 16px;
	min-block-size: 16px;

	circle {
		transform: rotate(-90deg);
		transform-origin: 50% 50%;
		transition: all var(--control-normal-duration) linear;
		fill: none;
		stroke: var(--accent-default);
		stroke: {
			width: 1.5;
			linecap: round;
			dasharray: 43.97;
		}
	}

	&.indeterminate circle {
		animation: progress-ring-indeterminate 2s linear infinite;
	}
}