→ Amelia Clarke
→ Interactive Skill Graph with Animated Pr...

Interactive Skill Graph with Animated Progress Bars

Visualize your skills with this interactive, animated skill graph component. Impress potential employers with a dynamic display of your expertise.

This Example is contributed by Amelia Clarke, on 12-Feb-2025. It is responsive. similar terms for this example are Transitions,Statistic,Data Visualization,Statistical Overview,Statistics Display,Stats,Info,Show info,Statistics

Progress Bar Animation Stats Display Skill Set

Author Amelia Clarke

Fork Fullscreen

<div class="skill-graph">
  <div class="skill-item">
    <div class="skill-name">HTML</div>
    <div class="skill-bar-container">
      <div class="skill-bar" data-percent="95" style="--fill-percent: 95%;"></div>
      <div class="skill-percent">95%</div>
    </div>
  </div>
  <div class="skill-item">
    <div class="skill-name">CSS</div>
    <div class="skill-bar-container">
      <div class="skill-bar" data-percent="90" style="--fill-percent: 90%;"></div>
       <div class="skill-percent">90%</div>
    </div>
  </div>
  <div class="skill-item">
    <div class="skill-name">JavaScript</div>
    <div class="skill-bar-container">
      <div class="skill-bar" data-percent="85" style="--fill-percent: 85%;"></div>
       <div class="skill-percent">85%</div>
    </div>
  </div>
    <div class="skill-item">
    <div class="skill-name">React</div>
    <div class="skill-bar-container">
      <div class="skill-bar" data-percent="80" style="--fill-percent: 80%;"></div>
       <div class="skill-percent">80%</div>
    </div>
  </div>
  <div class="skill-item">
    <div class="skill-name">Node.js</div>
    <div class="skill-bar-container">
      <div class="skill-bar" data-percent="70" style="--fill-percent: 70%;"></div>
       <div class="skill-percent">70%</div>
    </div>
  </div>
</div>

Related Examples