Result
SVGとCSSで作れるサークルプログレスバーです
css
@keyframes load {/*アニメーション*/ 0% { stroke-dashoffset: 0; }}.progress {/*親要素*/ position: relative; display: inline-block; padding: 0; text-align: center;}.progress > li {/*プログレスバーを包括する子要素*/ display: inline-block; position: relative; text-align: center; color: #93A2AC; font-weight: 100; margin: 2rem;}.progress > li:before {/*カスタムデータ属性に設定したデータ名のテキストを表示*/ content: attr(data-name); position: absolute; width: 100%; bottom: -2rem; font-weight: 400;}.progress > li:after {/*パーセンテージを表示*/ content: attr(data-percent); position: absolute; width: 100%; top: 3.7rem; left: 0; font-size: 2rem; text-align: center;}.progress svg {/*プログレスバー*/ width: 10rem; height: 10rem;}.progress svg:nth-child(2) { position: absolute; left: 0; top: 0; transform: rotate(-90deg);}.progress svg:nth-child(2) path { fill: none; stroke-width: 25; stroke-dasharray: 629; stroke: #fff; opacity: .9; animation: load 10s;} |
html
<ul class="progress"><!--子要素にdata属性でテキストとパーセントを設定--> <li data-name="SVG Skill" data-percent="13%"><!--グラデーション付きのプログレスバー--> <svg viewBox="-10 -10 220 220"> <g fill="none" stroke-width="3" transform="translate(100,100)"> <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/> <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/> <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/> <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/> <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/> <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/> </g> </svg> <svg viewBox="-10 -10 220 220"> <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="81"></path> </svg></li>・・・</ul> |
