<div class="container">

    <div class="container__progressbars">

        <div class="progressbar">

            <svg class="progressbar__svg">

                <circle cx="80" cy="80" r="70" class="progressbar__svg-circle circle-html shadow-html"> </circle>

            </svg>

            <span class="progressbar__text shadow-html">HTML</span>

       </div>

   </div>

</div>

.circle-wrap .circle .mask,

.circle-wrap .circle .fill {

  width: 150px;

  height: 150px;

  position: absolute;

  border-radius: 50%;

}

​

.mask .fill {

  clip: rect(0px, 75px, 150px, 0px);

  background-color: #227ded;

}