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