<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Progress Bar</title>
</head>
<body>
  <div class="skills">
    <div class="skill">
      <div class="skill-name">HTML</div>
      <div class="skill-bar">
        <div class="skill-percentage" per="90%" style="max-width:90%"></div>
      </div>
    </div>
    <div class="skill">
      <div class="skill-name">CSS</div>
      <div class="skill-bar">
        <div class="skill-percentage" per="80%" style="max-width:80%"></div>
      </div>
    </div>
    <div class="skill">
      <div class="skill-name">Javascript</div>
      <div class="skill-bar">
        <div class="skill-percentage" per="60%" style="max-width:65%"></div>
      </div>
    </div>
  </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  font-family: "Ubuntu", sans-serif;
  box-siziing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #17181F;
}

.skills {
  width: 100%;
  max-width:600px;
  padding: 0 20px;
}

.skill-name {
  font-size: 18px;
  font-weight: 700;
  color: #EEEDF0;
  text-transform: uppercase;
  margin: 20px 0;
}

.skill-bar {
  height: 14px;
  background: #282828;
  border-radius: 3px;
}

.skill-percentage {
  height: 14px;
  background: #FF96AD;
  border-radiud: 3px;
  position: relative;
  animation: fillBars 2.5s 1;
}

.skill-percentage::before{
  content: attr(per);
  position: absolute;
  padding: 4px 6px;
  background: #Fff5fd;
  border-radius: 4px;
  font-size: 12px;
  top: -35px;
  right: 0;
  transform: transition(50%)  
}

.skill-percentage::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #005A8D;
  top: -20px;
  right: 0;
  transform: translateX(50%) rotate(45deg);
  border-radius: 2px;
}

@keyframes fillBars {
  from{
    width: 0;
  }
  to{
   width: 100%; 
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.