“CSS Animated Progress Bar” Ответ

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>
        </svg> 
        <span class="progressbar__text">HTML</span>
    </div>
    <!--You can add other progress bars here-->
</div>
Eol Nuha

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

Ответы похожие на “CSS Animated Progress Bar”

Вопросы похожие на “CSS Animated Progress Bar”

Больше похожих ответов на “CSS Animated Progress Bar” по HTML

Смотреть популярные ответы по языку

Смотреть другие языки программирования