ADVERTISEMENT

Animated Skills Bar HTML,CSS and jQuery

Telegram Group Join Now

ADVERTISEMENT

Animated Skills Bar HTML,CSS and jQuery

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

 

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

Now let’s see the codes of this project:

ADVERTISEMENT

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)

ADVERTISEMENT

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:

ADVERTISEMENT

Portfolio Website using HTML and CSS (Source Code)

ADVERTISEMENT

 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!

ADVERTISEMENT

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.

ADVERTISEMENT

Thank you!

ADVERTISEMENT

Restaurant Website Using HTML and CSS

ADVERTISEMENT

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.

ADVERTISEMENT

Written by @codingporium

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT