Are you looking to enhance your portfolio or resume with visually appealing skill progress bars? In this tutorial, we’ll guide you step by step on how to create animated skill progress bars using HTML, CSS, and JavaScript. These sleek and interactive bars will dynamically showcase your skill levels, making your website more engaging and professional.
By the end of this tutorial, you’ll have a fully functional skill section with smooth animations and a modern design. Let’s get started!
🔹 What You’ll Learn
✅ How to create a responsive progress bar layout using HTML 📄
✅ Styling progress bars with modern CSS for a sleek and professional look 🎨
✅ Adding smooth animation effects using CSS and JavaScript 🏗️
✅ Dynamically setting skill levels with JavaScript attributes ⏳
✅ Customizing the progress bars to match your personal or brand style 🎯
🔹 Step 1: HTML Structure
We start by creating a simple HTML structure with a heading and multiple skill sections. Each section consists of a skill name and a corresponding progress bar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Skill Progress Bars</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My Skills</h1>
<div class="skill-container">
<div class="skill">HTML</div>
<div class="progress-bar">
<div class="progress" data-percent="90"></div>
<div class="progress-text">90%</div>
</div>
</div>
<div class="skill-container">
<div class="skill">CSS</div>
<div class="progress-bar">
<div class="progress" data-percent="80"></div>
<div class="progress-text">80%</div>
</div>
</div>
<div class="skill-container">
<div class="skill">JavaScript</div>
<div class="progress-bar">
<div class="progress" data-percent="70"></div>
<div class="progress-text">70%</div>
</div>
</div>
<div class="skill-container">
<div class="skill">React</div>
<div class="progress-bar">
<div class="progress" data-percent="60"></div>
<div class="progress-text">60%</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
🔹 Step 2: Styling with CSS
To make our progress bars look visually appealing, we apply CSS styles for layout, colors, and animation effects.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
h1 {
text-align: center;
color: #333;
}
.skill-container {
width: 80%;
max-width: 600px;
margin: 20px 0;
}
.skill {
margin: 10px 0;
font-size: 18px;
font-weight: bold;
}
.progress-bar {
width: 100%;
height: 20px;
background-color: #ddd;
border-radius: 10px;
overflow: hidden;
position: relative;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.progress {
height: 100%;
width: 0;
background: linear-gradient(90deg, #1e90ff, #00bfff);
border-radius: 10px;
transition: width 2s ease-in-out;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
font-weight: bold;
color: white;
}
🔹 Step 3: Adding JavaScript for Animation
Now, let’s use JavaScript to animate the progress bars. We’ll set their width dynamically based on the data-percent attribute.
document.addEventListener("DOMContentLoaded", function() {
const progressBars = document.querySelectorAll(".progress");
progressBars.forEach(bar => {
const percent = bar.getAttribute("data-percent");
bar.style.width = percent + "%";
});
});
🔹 Final Output
Once you’ve added the HTML, CSS, and JavaScript, your skill progress bars will animate smoothly, showing your expertise levels dynamically.
🎥 Video Tutorial
Watch the full tutorial here:
💻 Source Code
Access the complete project on GitHub:
🔗 GitHub Repository
🔹 Customize Your Progress Bars
Want to make your progress bars unique? Here are some ideas:
✅ Change the color gradient of the progress bars 🎨
✅ Adjust the animation speed to make them smoother ⚡
✅ Add icons next to skill names for a modern look ✨
✅ Use tooltips to provide more details on each skill 📌
🔹 Conclusion
By following this tutorial, you’ve learned how to create animated skill progress bars using HTML, CSS, and JavaScript. These progress bars are a great way to showcase your expertise dynamically on your portfolio or resume website.
🔔 Stay Updated!
If you found this tutorial helpful, don’t forget to like, comment, and subscribe to Madras Academy for more exciting web development tutorials! 🚀
📢 Share this with your fellow developers and start building awesome UI components today!
#HTML #CSS #JavaScript #ProgressBar #AnimatedUI #WebDesign #FrontendDevelopment #WebDevelopment #PortfolioWebsite #TechTutorial #Coding #InteractiveDesign #SkillShowcase 🎯💡