How To Create a Skill Bar | Skill Bar HTML CSS jQuery – Code With Random

How To Create a Skill Bar | Skill Bar HTML CSS jquery – CodeWithRandom 

Hey friends, today we will see how to make this cool skills bar project page using HTML, CSS & jQuery

Now let’s see the general use of this project. You would mainly need this project in your portfolio website to showcase your skills and this project is superb as it also has a nice flowing animation thanks to the power of Jquery.

Now let’s see the codes of this project:

HTML Codes

Paste the codes below:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="utf-8">
<title></title>
</head>

<body>
<div class="skills">

<div class="section-title text-center">
<h1>Skills Bar</h1>
</div>

<div class="skill">
<div class="skill-name">HTML</div>
<div class="skill-bar">
<div class="skill-per" per="45"></div>
</div>
</div>

<div class="skill">
<div class="skill-name">CSS</div>
<div class="skill-bar">
<div class="skill-per" per="70"></div>
</div>
</div>


<div class="skill">
<div class="skill-name">Javascript</div>
<div class="skill-bar">
<div class="skill-per" per="90"></div>
</div>
</div>

<div class="skill">
<div class="skill-name">Bootstrap</div>
<div class="skill-bar">
<div class="skill-per" per="65"></div>
</div>
</div>


</div>
<script>
$('.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) + '%');

}

});
});
</script>

</body>
</html>


The output for now would be:


Now let’s use CSS to style it.


CSS Codes

Paste the CSS Codes below:

  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);
}


JAVASCRIPT CODES

Lastly, paste the codes below:

    <script>
$('.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) + '%');

}

});
});
</script>


The final output would be:

And that’s all for this project!


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Skill Bar. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Skill Bar using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Leave a Reply