CSSアニメーションで円形プログレスバーを作る方法 - Qiita

CSSアニメーションで円形プログレスバーを作ってみました。JavaScriptやSVG、画像は使っていません。 サンプル（GIF） HTML .circle { position: relative; width: 120px; height: 120px; background: #333; border-radius: 50%; text-align: center; overflow: hidden; z-index: 1; } .circle::before { content: ""; display: block; position: absolute; top: 0; left: -60px; width: 120px; height: 120px; background: #999; transform-origin: right 60px; z-index: 2; ani

[skyguild]

“@keyframes rotate-circle-left { 0% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }”

[hokkey]

最初に考えた人すごい

[glat_design]

ちょっと前に作ろうとしてたけどなるほどー参考になりました /