html progress bars animated

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        /* Styling the body of the page */
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #010101;
        }
 
        /* Stylingthe last h2 tag by giving margin bottom */
        .progress-bar-container:not(:last-child) {
            margin-bottom: 50px;
        }
 
        /* Styling the h2 tag by giving color, 
        letter spacing, font-size etc.*/
        .progress-bar-container h2 {
            font-family: Arial, Helvetica, sans-serif;
            color: #eee;
            letter-spacing: 1px;
            font-size: 20px;
        }
 
        /* Styling the border and box
        effect of the progress bar*/
        .progress-bar {
            width: 800px;
            height: 5px;
            margin-top: 10px;
            border: 1px solid #565656;
            border-radius: 5px;
            box-shadow: 0 0 10px rgb(245, 159, 0);
        }
 
        /* Stylingthe background color of each 
        animation and border radius */
        .percentage {
            display: block;
            height: 100%;
            background-color: orange;
            border-radius: 5px;
            animation: progress 1500ms ease-in 1;
        }
 
        /* Assigning width of each languages*/
        .c {
            width: 85%;
        }
 
        .java {
            width: 70%;
        }
 
        .python {
            width: 55%;
        }
 
        .html {
            width: 75%;
        }
 
        .css {
            width: 65%;
        }
 
        .javascript {
            width: 55%;
        }
 
        /* Animating the progress bar by 
        initially starting from 0*/
        @keyframes progress {
            from {
                width: 0;
            }
        }
    </style>
</head>
 
<body>
    <div class="skills">
        <div class="progress-bar-container">
            <h2>C/C++</h2>
            <div class="progress-bar">
                <span class="percentage c"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>Java</h2>
            <div class="progress-bar">
                <span class="percentage java"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>Python</h2>
            <div class="progress-bar">
                <span class="percentage python"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>HTML</h2>
            <div class="progress-bar">
                <span class="percentage html"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>CSS</h2>
            <div class="progress-bar">
                <span class="percentage css"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>JavaScript</h2>
            <div class="progress-bar">
                <span class="percentage javascript"></span>
            </div>
        </div>
    </div>
</body>
</html>.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>
Html相关代码片段
