Animated Skills Bar HTML,CSS and jQuery

Animated Skills Bar HTML,CSS and jQuery

Animated Skills Bar HTML,CSS and jQuery

Animated Skills Bar HTML,CSS and jQuery
Animated Skills Bar HTML,CSS and jQuery

 

Hey friends, today we will see how to make this cool Animated Skills Bar Project 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 Code For Animated Skills Bar

Paste the codes below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Skills Bar </title>
  <!-- CSS -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <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>
  <!-- jQuuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</body>

</html>

The output, for now, would be:

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Animated Skills Bar HTML,CSS and jQuery

 

Now let’s use CSS to style it.

CSS Code For Animated Skills Bar

Paste the CSS Codes below:

Portfolio Website using HTML and CSS (Source Code)

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

jQuery Code For Animated Skills Bar

Lastly, paste the codes below:

10+ HTML CSS Projects For Beginners with Source Code

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

}

});
});

Final Output Of Animated Skills Bar HTML,CSS and jQuery

Animated Skills Bar HTML,CSS and jQuery
Animated Skills Bar HTML,CSS and jQuery

 

And that’s all for this project!

We have completed our Animated Skills Bar. Here is our updated output with JavaScript. Hope you like the Animated Skills Bar. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

Restaurant Website Using HTML and CSS

In this post, we learn how to create an Animated Skills Bar HTML,CSS and jQuery. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by @codingporium



Leave a Reply