Building Interactive Skill Progress Bars with HTML, CSS, and JavaScript
Matt Adil
Posted on February 23, 2024
Introduction:
Skill progress bars are a common feature in portfolios and resumes, allowing users to visually showcase their expertise in various areas. In this article, we'll explore how to create dynamic and interactive skill progress bars using HTML, CSS, and JavaScript.
HTML Structure:
We begin by defining the HTML structure for our skill progress bars. We use semantic HTML elements such as '<section>', '<h3>', '<div>', and '<p>' to organize the content. Each skill is represented by a container with a name, a progress bar, and a percentage indicator.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <!-- importing "Poppins" font family from google font -->
<title>Skill Bar</title>
</head>
<body>
<section class="skills" id="skills">
<h3 class="skills-header">My Skills</h3>
<div class="skills-container">
<div class="skill-container">
<p>HTML</p>
<div class="percentage html-percentage">90%</div>
<div class="bar">
<span class="html"></span>
</div>
</div>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"skill-container"</span><span class="nt">></span>
<span class="nt"><p></span>CSS<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"percentage css-percentage"</span><span class="nt">></span>90%<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bar"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"css"</span><span class="nt">></span></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"skill-container"</span><span class="nt">></span>
<span class="nt"><p></span>JavaScript<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"percentage javascript-percentage"</span><span class="nt">></span>80%<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bar"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"javascript"</span><span class="nt">></span></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"skill-container"</span><span class="nt">></span>
<span class="nt"><p></span>React.JS<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"percentage react-percentage"</span><span class="nt">></span>70%<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bar"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"react"</span><span class="nt">></span></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"skill-container"</span><span class="nt">></span>
<span class="nt"><p></span>Node.JS<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"percentage node-percentage"</span><span class="nt">></span>50%<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"bar"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"node"</span><span class="nt">></span></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"./script.js"</span><span class="nt">></script></span>
</body>
</html>
CSS Styling:
Next, we style our skill progress bars using CSS. We define styles for the overall layout, skill containers, progress bars, and percentage indicators. We also incorporate animations to enhance the visual appeal of the bars.
*,
::before,
::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width:100%;
height:100vh;
background:#111222 ;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding:20px;
}
.skills{
width: 600px;
min-width:300px;
max-width: 100%;
color:#fff;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.skills-header{
font-family: "Poppins", sans-serif;
font-size: 30px;
width:100%;
text-align: center;
margin-bottom: 10px;
box-sizing: border-box;
}
.skills-container{
max-width: 100%;
width:100%;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-radius: 10px;
padding:20px;
margin:0;
box-sizing: border-box;
}
.skill-container{
width:100%;
margin:10px 0;
padding: 10px 0;
position:relative;
}
.skill-container p{
margin: 5px;
font-family: "Poppins", sans-serif;
font-size: 16px;
}
.bar{
width:100%;
background: #475472;
display:block;
height: 20px;
border:none;
border-radius: 100vw;
overflow: hidden;
transition: all .3s cubic-bezier(.25, 8, .25, 1);
}
.bar span{
height:20px;
float: left;
background: #5271ff;
border:none;
border-radius: 100vw;
}
/* adding animation to skill bar */
.html.animate, .css.animate{
width: 90%;
animation: html_css 3s;
}
.javascript.animate{
width:80%;
animation: javascript 3s;
}
.react.animate{
width:70%;
animation: react 3s;
}
.node.animate{
width:50%;
animation: node 3s;
}
@keyframes html_css{
0%{
width:0%
};
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="nl">width</span><span class="p">:</span><span class="m">90%</span>
<span class="p">}</span>
}
@keyframes javascript{
0%{
width:0%
};
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="nl">width</span><span class="p">:</span><span class="m">80%</span>
<span class="p">}</span>
}
@keyframes react{
0%{
width:0%
};
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="nl">width</span><span class="p">:</span><span class="m">70%</span>
<span class="p">}</span>
}
@keyframes node{
0%{
width:0%
};
<span class="err">100</span><span class="o">%</span><span class="p">{</span>
<span class="nl">width</span><span class="p">:</span><span class="m">50%</span>
<span class="p">}</span>
}
.percentage{
content: "";
position: absolute;
top:12px;
width:25px;
height:20px;
background: #5271ff;
display:flex;
align-items: center;
justify-content: center;
font-size: 10px;
border-radius: 2px;
z-index: 10;
transition: all .3s ease-in-out;
}
.percentage::after{
content: "";
position: absolute;
top:15px;
left:50%;
transform: translateX(-50%) rotate(45deg);
margin: auto;
width:10px;
height:10px;
background: #5271ff;
z-index:-1;
}
/* adding animation to .percentage */
.html-percentage.animate,
.css-percentage.animate{
left:90%;
animation: html_css_percentage 3s;
}
.javascript-percentage.animate{
left:80%;
animation: javascript_percentage 3s;
}
.react-percentage.animate{
left:70%;
animation: react_percentage 3s;
}
.node-percentage.animate{
left:70%;
animation: react_percentage 3s;
}
@keyframes html_css_percentage{
0%{
left:0
};
100%{
left:90%;
}
}
@keyframes javascript_percentage{
0%{
left:0
};
100%{
left:80%;
}
}
@keyframes react_percentage{
0%{
left:0
};
100%{
left:70%;
}
}
@keyframes node_percentage{
0%{
left:0
};
100%{
left:50%;
}
}
JavaScript Interaction:
To make our skill progress bars interactive, we use JavaScript. We employ the Intersection Observer API to trigger animations when the bars come into view. Additionally, we dynamically calculate and set the position of the percentage indicators based on the width of the bars.
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
spans.forEach((span, index) => {
const percentage = percentages[index];
if (entry.isIntersecting) {
span.classList.add('animate');
percentage.classList.add('animate');
} else {
span.classList.remove('animate');
percentage.classList.remove('animate');
}
});
});
});
const skillContainer = document.querySelector('.skills-container');
const spans = document.querySelectorAll('.bar span');
const percentages = document.querySelectorAll('.percentage');
observer.observe(skillContainer);
function updatePercentagePositions() {
const barWidth = document.querySelector('.bar').clientWidth;
percentages.forEach(percentage => {
const widthPercentage = parseFloat(percentage.textContent) / 100;
percentage.style.left = </span><span class="p">${</span><span class="nx">barWidth</span> <span class="o">*</span> <span class="nx">widthPercentage</span> <span class="o">-</span> <span class="mf">12.5</span><span class="p">}</span><span class="s2">px;
});
}
updatePercentagePositions(); // Call initially
Conclusion:
In this tutorial, we've learned how to create interactive skill progress bars using HTML, CSS, and JavaScript. By combining these technologies, we can build visually appealing and engaging elements for showcasing our skills on websites and portfolios.
Check out the live demo and code:
CodePen: Link to CodePen
GitHub Repo: Link to GitHub Repo
Posted on February 23, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
October 31, 2024
October 30, 2024