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;}
}
Eol Nuha
