Hello readers, Today you’ll learn how to create an Animated Skills Bar using only HTML & CSS only. This type of Animated Skills Bar is used on the websites for Skills Bar.
You easily create Animated Skills Bar Using HTML and CSS then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some information about this Animated Skills Bar UI Design
In this Animated Skill Bar, on the webpage, there are four skill bars with the skill titles and their skill percentages. These skills bars are purely based on HTML & CSS only and these bars also have animation, which means when you reload your webpage, these skill bars display horizontally with awesome animation.
Watch the video tutorial to create Animated Skills Bar UI Design
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this Animated Skills Bar step by step completely beautifully. So you can learn how to make these Animated Skills Bar UI Design. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Animated Skills Bar UI Design Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Responsive Footer Design using HTML & CSS
- Animated Pricing Card Using HTML & CSS
- Portfolio Website using HTML CSS & JavaScript
Animated Skills Bar | Source Codes
You have to create HTML & CSS File For this Animated Skills Bar. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use images also.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Skill Bar</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>CSS Skills Bar UI Design</h2>
<div class="skills">
<span class="Name">Html</span>
<div class="percent">
<div class="progress" style="width: 95%"></div>
</div>
<span class="value">95%</span>
</div>
<div class="skills">
<span class="Name">CSS</span>
<div class="percent">
<div class="progress" style="width: 90%"></div>
</div>
<span class="value">90%</span>
</div>
<div class="skills">
<span class="Name">Javacript</span>
<div class="percent">
<div class="progress" style="width: 72%"></div>
</div>
<span class="value">72%</span>
</div>
<div class="skills">
<span class="Name">Photoshop</span>
<div class="percent">
<div class="progress" style="width: 85%"></div>
</div>
<span class="value">85%</span>
</div>
</div>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #2e2e2e;
}
.container{
position: relative;
width: 500px;
}
.container h2{
color: #fff;
}
.container .skills{
position: relative;
display: flex;
margin: 20px 0;
padding: 24px 10px 18px;
background: linear-gradient(#616161 0%, #333 10%, #222);
border-radius: 8px;
overflow: hidden;
border: 2px solid #000;
transition: 0.5s;
}
.container:hover .skills{
opacity: 0.05;
}
.container .skills:hover{
opacity: 1;
transform: scale(1.1);
}
.container .skills:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: rgba(255, 255, 255, .1);
}
.container .skills .Name{
position: relative;
width: 110px;
text-align: right;
color: #fff;
margin-top: -2px;
text-transform: uppercase;
}
.container .skills .value{
position: relative;
width: 40px;
text-align: left;
color: #fff;
margin-top: -2px;
text-transform: uppercase;
}
.container .skills .percent{
position: relative;
width: calc(100% - 150px);
height: 20px;
margin: 0 10px;
border-radius: #151515;
box-shadow: inset 0 0 10px #000;
overflow: hidden;
}
.container .skills .percent .progress{
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 100%;
border-radius: 10px;
background: #fff;
box-shadow: inset 0 0 2px #000;
animation: animate 4s ease-in-out forwards;
}
@keyframes animate{
from{
width: 0;
}
}
.container .skills:nth-child(2) .percent .progress{
background: linear-gradient(45deg, #1fe6ff, #673ab7);
}
.container .skills:nth-child(3) .percent .progress{
background: linear-gradient(45deg, #3bc0ff, #33ff00);
}
.container .skills:nth-child(4) .percent .progress{
background: linear-gradient(45deg, #ffee54, #ff00ca);
}
.container .skills:nth-child(5) .percent .progress{
background: linear-gradient(45deg, #22ffde, #2196f3);
}now you’ve successfully created this Animated Skills Bar UI Design using HTML and CSS. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
