animated progress bar css

.container__progressbars {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap
    min-width: 270px;
    width: 100%;
    min-height: 100%;
  }
.progressbar {
    position: relative;
    width: 170px;
    height: 170px;
    transform: rotate(-90deg);
}
.progressbar__svg {
    position: relative;
    width: 100%;
    height: 100%;
}
.progressbar__svg-circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 10;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    stroke: white;
    stroke-linecap: round;
    transform: translate(5px, 5px);
}
.circle-html {
    stroke: #007bff;
    /*Set this for the duration of the animation*/
    animation: anim_circle-html 2s ease-in-out forwards; 
}
.progressbar__text {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.25em 0.5em;
    color: #000; /*Change this to change progressbar text*/
    font-weight: bold;
    border-radius: 0.25em;
    transform: translate(-50%, -50%) rotate(90deg);
}
@keyframes anim_circle-html {
    to {stroke-dashoffset: 0;}
}

<div class="container__progressbars">
    <div class="progressbar">
        <svg class="progressbar__svg">
            <circle cx="80" cy="80" r="70" class="progressbar__svg-circle circle-html"></circle>
        </svg> 
        <span class="progressbar__text">HTML</span>
    </div>
    <!--You can add other progress bars here-->
</div>

/* animated progress bar css code */
svg.radial-progress circle{
	stroke-width: 5;
}

svg.radial-progress text {
	fill: #3c4761;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 300;
	font-size: 1.6rem;
}
svg.web-design circle{
	stroke: #30bae7;
}
svg.html-css circle{
	stroke: #d74680;
}
svg.graphic-design circle{
	stroke: #15c7a8;
}
svg.ui-ux circle{
	stroke: #eb7d4b;
}