<body>
    <section class="container">
        
        <section  class="bar">
            <section class="info">
                <span>HTML</span>

            </section>
            <section class="progress-bar html"><span></span></section>
        </section>
        <section  class="bar">
            <section class="info">
                <span>CSS</span>

            </section>
            <section class="progress-bar css"><span></span></section>
        </section>
        <section  class="bar">
            <section class="info">
                <span>JAVA SCRIPT</span>

            </section>
            <section class="progress-bar javascript"><span></span></section>
        </section>
        <section  class="bar">
            <section class="info">
                <span>JQUERY</span>

            </section>
            <section class="progress-bar jquery"><span></span></section>
        </section>
        <section  class="bar">
            <section class="info">
                <span>BOOT STRAP</span>

            </section>
            <section class="progress-bar bootstrap"><span></span></section>
        </section>
    </section>
</body>
*{
margin: 0; 
box-sizing: border-box;
padding: 0;  
}


body,
html{
    display: grid;
    height: 100%;
    place-items:center ;
}

.container{
    width: 600px;
    background-color: #fff;
    border-radius: 10px;
    padding: 25px 30px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.bar{
    margin: 20px 0;
}
.bar:first-child{
    margin: 0;
}
.info{
    margin-bottom: 5px;
    font-size: 17px;
 
}

.progress-bar{
    position: relative;
    height: 10px ;
    width: 100%;
   
    outline: none;
    border-radius: 5px;
    background: #f0f0f0;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5),
    0px 1px 1px rgba(225, 225, 225, 0.8);
}
.progress-bar span{
    width: 80%;
    border-radius: 5px;
    height: 100%;
    background-color: rgb(35, 250, 89)
    ;
    position: absolute;

}
.progress-bar span::before{
    position: absolute;
    content: "";
    height: 0;
    width: 0;
    right: 0;
    top: -10px;
    border: 7px solid  transparent;
    border-bottom-width: 0;
    border-right-width: 0;
    border-top-color: #000;


}
.progress-bar span::after{
    content: "80%";
    color: white;
    position: absolute;
    border-radius: 3px;
    right: 0;
    top: -27px;
    background-color: #000;
    padding: 1px 5px;
}

.progress-bar.html span{
    width: 80%;
    } 
 .progress-bar.css span{
        width: 80%;
        }
        
.progress-bar.javascript span{
            width: 40%;
            } 
 .progress-bar.javascript span::after{
                content: "40%";
            }
            .progress-bar.jquery span::after{
                content: "50%";
            }


            .progress-bar.bootstrap span::after{
                content: "50%";
            }


            .progress-bar.jquery span
            ,
           
            .progress-bar.bootstrap span {
                width: 50%;
            }



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.