Css Animated Progress Bar

css animated progress bar

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;}
css animated progress bar
<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>
<span class="progressbar__text">HTML</span>
<!--You can add other progress bars here-->
Source: eolnuha.com

Leave a Comment