css 使用SVG和CSS动画尝试Chrome风格的进度指示器

Posted 2021-05-13

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

// alert('Hello world!');

<svg class="progress" viewBox="0 0 100 100">
	<circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
</svg>

/**
 * Attempt for Chrome-style progress-indicator with SVG and CSS animations
 */
 
@keyframes spin {
	to {
		stroke-dashoffset: -264;
	}
}

.progress circle {
	fill: none;
	stroke: slategray;
	stroke-width: 16;
	stroke-linecap: round;
	stroke-dasharray: 0, 0, 50, 214;
	stroke-dashoffset: 0;
	animation: spin 4s infinite linear;
}