Hello everyone, you can learn how to create an Animated Skills Bar using HTML, CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Animated Skills Bar
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!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">
<link rel="stylesheet" href="style.css">
<title>Animated Skills Bar - Coding Power</title>
</head>
<body>
<div class="container">
<h1>Skills</h1>
<div class="skill">
<h3>HTML</h3>
<h4>95%</h4>
<span class="skill-bar"></span>
<span class="fill-bar html"></span>
</div>
<div class="skill">
<h3>CSS</h3>
<h4>85%</h4>
<span class="skill-bar"></span>
<span class="fill-bar css"></span>
</div>
<div class="skill">
<h3>JavaScript</h3>
<h4>70%</h4>
<span class="skill-bar"></span>
<span class="fill-bar javascript"></span>
</div>
<div class="skill">
<h3>PHP</h3>
<h4>85%</h4>
<span class="skill-bar"></span>
<span class="fill-bar php"></span>
</div>
<div class="skill">
<h3>React</h3>
<h4>65%</h4>
<span class="skill-bar"></span>
<span class="fill-bar react"></span>
</div>
</div>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #0077b6;
}
.container{
width: 550px;
background: white;
border-radius: 10px;
padding: 15px 30px;
}
.container h1{
text-align: center;
font-weight: 600;
margin-bottom: 30px;
}
.container .skill{
margin-bottom: 30px;
width: 100%;
align-items: center;
position: relative;
}
.container .skill h3{
display: inline-block;
margin-bottom: 5px;
}
.container .skill h4{
float: right;
}
.container .skill .skill-bar{
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: 17px;
border-radius: 15px;
background: #48cae4;
}
.container .skill .fill-bar{
position: absolute;
top: 30px;
left: 0;
height: 17px;
border-radius: 15px;
background: #0077b6;
}
.container .skill .html{
animation: html 2s;
width: 95%;
}
.container .skill .css{
animation: css 2s;
width: 85%;
}
.container .skill .javascript{
animation: javascript 2s;
width: 70%;
}
.container .skill .php{
animation: php 2s;
width: 85%;
}
.container .skill .react{
animation: react 2s;
width: 65%;
}
@keyframes html{
from{
width: 0;
}
to{
width: 95%;
}
}
@keyframes css{
from{
width: 0;
}
to{
width: 85%;
}
}
@keyframes javascript{
from{
width: 0;
}
to{
width: 70%;
}
}
@keyframes php{
from{
width: 0;
}
to{
width: 85%;
}
}
@keyframes react{
from{
width: 0;
}
to{
width: 65%;
}
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
