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>

via

SVG circular progress: CSS animated & Angle gradient