body{
    margin: 0;
    padding: 0;
    font-family: 'open sans',sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
}
.skills{
    width: 100%;
    max-width: 600px;
    padding: 0 20px;
}
.section-title {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 40px;
}
.section-title h1{
    display: inline-block;
    font-size: 35px;
    text-transform: uppercase;
    font-weight: 700;
    color: #000000;
    margin: 0 0 5px;
    position: relative;
}
.section-title h1:before{
    content: '';
    left: 0;
    position: absolute;
    height: 2px;
    right: 32%;
    background-color: mediumseagreen;
    bottom: 0px;
}
.skills .section-title h1:before{
    left: 30%;
}
.text-center{
    text-align: center;
}
.skill-name{
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 20px 0;
}
.skill-bar{
    height: 20px;
    background: #cacaca;
    border-radius: 8px;

}
.skill-per{
height: 20px;
background-color: mediumseagreen;
border-radius: 8px;
width: 0;
transition: 1s linear;
position: relative;
}
.skill-per::before{
content: attr(per);
position: absolute;
padding: 4px 6px;
background-color: #000;
color: #fff;
font-size: 12px;
border-radius: 4px;
top: -35px;
right: 0;
transform: translateX(50%);
}
.skill-per::after{
content: '';
position: absolute;
width: 10px;
height: 10px;
background-color: #000;
border-radius: 2px;
top: -16px;
right: 0;
transform: translateX(50%) rotate(45deg);
}

$('.skill-per').each(function () {
var $this = $(this);
var per = $this.attr('per');
$this.css("width", per + '%');
$({ animatedValue: 0 }).animate({ animatedValue: per }, {
duration: 1000,
step: function () {
$this.attr('per', Math.floor(this.animatedValue) + '%');

},
complete: function () {
$this.attr('per', Math.floor(this.animatedValue) + '%');

}

});
});