Animated Skill Progress Bars CSS (Code Snippet)

<div class="skills-wrapper">
  <h3>Technical Skills</h3>
  <div class="skill-box">
    <div class="skill-info">
      <span>HTML & CSS</span>
      <span>90%</span>
    </div>
    <div class="skill-bar"><div class="fill html"></div></div>
  </div>
  <div class="skill-box">
    <div class="skill-info">
      <span>JavaScript</span>
      <span>85%</span>
    </div>
    <div class="skill-bar"><div class="fill js"></div></div>
  </div>
  <div class="skill-box">
    <div class="skill-info">
      <span>Python</span>
      <span>75%</span>
    </div>
    <div class="skill-bar"><div class="fill python"></div></div>
  </div>
</div>

.skills-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.skills-wrapper h3 {
  color: #1f2937;
  margin-bottom: 25px;
}
.skill-box {
  margin-bottom: 20px;
}
.skill-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #4b5563;
}
.skill-bar {
  width: 100%;
  height: 10px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.fill {
  height: 100%;
  border-radius: 10px;
  width: 0;
  animation: progress 1.5s ease-in-out forwards;
}
.html {
  background: #f97316;
  --w: 90%;
}
.js {
  background: #facc15;
  --w: 85%;
}
.python {
  background: #3b82f6;
  --w: 75%;
}
@keyframes progress {
  from { width: 0; }
  to { width: var(--w); }
}

Animated Skill Progress Bars CSS

Share Code Snippet