Simple Progress Bar that looks like this

Question

I‘m a not very advanced in coding. I‘m looking for an easy way to create an progress bar with html & css that looks like this (no animation needed).

Can anybody help me with a code?

Thank you Mags

VAIBHAV NIRMAL · Answer

Css and HTML

.wrapper {
    width: 400px;
    font-family: 'Roboto', sans-serif;
    margin:0 auto;
}
 
.skill {
    margin-bottom: 35px;
    position: relative;
    overflow-x:hidden;
}
 
.skill > p {
    font-size: 18px;
    font-weight: 700;
    color: #1a1716;
    margin: 0;
}
 
.skill:before {
    width: 100%;
    height: 10px;
    content: "";
    display: block;
    position: absolute;
    background: #959595;
    bottom: 0;
}
 
.skill-bar {
    width: 100%;
    height: 10px;
    background:#f4392f;
    display: block;
    position: relative;
}
 
.skill-bar span {
    position: absolute;
    border-top: 5px solid #f4392f;
    top: -30px;
    padding: 0;
    font-size: 18px;
    padding: 3px 0;
    font-weight: 500;
}
 
.skill-bar {
    position: relative;
}
 
.skill1 .skill-count1 {
    right: 0;
}
 
.skill1 {
    width: 95%;
}
 
.skill2 {
    width: 85%;
}
 
.skill2 .skill-count2 {
    right: 0;
}
 
.skill3{
   width: 75%;
}
 
.skill3 .skill-count3 {
    right: 0;
}


    CSS3 Skill Progress bar
    


    
        HTML5
        
            95%
        
    
    
        CSS3
        
            85%
        
    
    
        JQUERY
        
            75%

Simple Progress Bar that looks like this

1 Answers