называется по разному - radial progress, ring, progress, cyrcle progress, просто гуглите это название с добавкой "css", найдете много материала.

SVG circular progress: CSS animated & Angle gradient

by akogch

HTML

<!--  Container  -->
<ul class="progress">
  <!--  Item  -->
  <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>
  <!--  Item  -->
  <li data-name="HTML5 Skill" data-percent="87%">
    <svg viewBox="-10 -10 220 220">
        <g fill="none" stroke-width="2" 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="547"></path>
        </svg>
  </li>
  <!--  Item  -->
  <li data-name="jQuery Skill" data-percent="13%">
    <svg viewBox="-10 -10 220 220">
        <g fill="none" stroke-width="12"...

SCSS

@import url(https://fonts.googleapis.com/css?family=Lato:100,400);
@keyframes load {
  0% {
    stroke-dashoffset: 0
  }
}

.progress {
  position: relative;
  display: inline-block;
  padding: 0;
  text-align: center;
  &>li {
    display: inline-block;
    position: relative;
    text-align: center;
    color: #93A2AC;
    font-family: Lato;
    font-weight: 100;
    margin: 2rem;
    &:before {
      content: attr(data-name);
      position: absolute;
      width: 100%;
      bottom: -2rem;
      font-weight: 400;
    }
    &:after {
      content: attr(data-percent);
      position: absolute;
      width: 100%;
      top: 3.7rem;
      left: 0;
      font-size: 2rem;
      text-align: center;
    }
  }
  svg {
    width: 10rem;
    height: 10rem;
    &:nth-child(2) {
      position: absolute;
      left: 0;
      top: 0;
      transform: rotate(-90deg);
    }
    &:nth-child(2) path {
      fill: none;
      stroke-width: 25;
      stroke-dasharray: 629;
      stroke: #fff;
      opacity: .9;
      animation: load 10s;
    }
  }
}