Animated Skill Bars
Modern skill bars with smooth animations and percentage indicators, perfect for showcasing professional skills and expertise.
Responsive Design
Yes
Dark Mode Support
No
lines
269
Browser Compatibility
Chrome · Firefox · Safari · Edge
Live Preview
Interact with the component without leaving the page.
HTML
60
lines
CSS
145
lines
JavaScript
64
lines
<div class="skills-container">
<div class="skills-demo">
<div class="skills-header">
<h2>Professional Skills</h2>
<p>My expertise and experience</p>
</div>
<div class="skills-list">
<div class="skill-item">
<div class="skill-info">
<span class="skill-name">Web Development</span>
<span class="skill-percent" data-percent="95">95%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-percent="95"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-info">
<span class="skill-name">UI/UX Design</span>
<span class="skill-percent" data-percent="85">85%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-percent="85"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-info">
<span class="skill-name">JavaScript</span>
<span class="skill-percent" data-percent="90">90%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-percent="90"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-info">
<span class="skill-name">React</span>
<span class="skill-percent" data-percent="80">80%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-percent="80"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-info">
<span class="skill-name">Node.js</span>
<span class="skill-percent" data-percent="75">75%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-percent="75"></div>
</div>
</div>
</div>
</div>
</div>
Browser Compatibility
Chrome
≥ 50
Firefox
≥ 45
Safari
≥ 10
Edge
≥ 15