Animated Skills Bars Using HTML and CSS

Skills Bar with Animation CSS is utilized on a variety of personal and educational websites. The Skill Bar allows you to personalize your experience page.

I’ll teach you how to make an animated skills bar using only HTML and CSS code in this tutorial. In this design, I didn’t utilize any JavaScript or JQuery. This talents bar was created entirely with HTML and CSS3.

I started by creating a little box on a web page. Then I gave that box a title and four progress bars. A particular value is assigned to each progress bar. When you load this page, the animation will start at zero and go to your predetermined meaning. It will take two seconds for you to achieve your specified value, therefore there will be some animation here.

How to Make Animated Skill bar using HTML and CSS

See the Pen
Animated Skills Bars Using HTML & CSS
by Kundan Kumar (@ambmlipr-the-bold)
on CodePen.

I’ll show you how I made this Animated Skills Bar using HTML and CSS code in the steps below. You may also get the source code to do it yourself.

Step 1: Make index.html File

First of all, you want to make a file index.html

<!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>Skills Bars</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="skills">
    <div class="skill">
      <div class="skill-name">HTML</div>
      <div class="skill-bar">
        <div class="skill-per" 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-per" per="70%" style="max-width:70%"></div>
      </div>
    </div>

    <div class="skill">
      <div class="skill-name">Javascript</div>
      <div class="skill-bar">
        <div class="skill-per" per="60%" style="max-width:60%"></div>
      </div>
    </div>


  </div>

</body>

</html>

Step 2: Make a File of Style.css

After making the style.css file then paste the code from below.

*{
  margin: 0;
  padding: 0;
  font-family: "Ubuntu", sans-serif;
  box-sizing: border-box;
}

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

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

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

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

.skill-per{
  height: 14px;
  background: #2543f1;
  border-radius: 3px;
  position: relative;
  animation: fillBars 2.5s 1;
}

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

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

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

Conclusion

Hopefully, you learned how to construct an Animated Skills Bar HTML CSS from the preceding tutorial. I’ve previously created a slew of different progress bars. You can look at more designs if you like this one.

If You have any problem then comment down below.

Total
0
Shares

Leave a Reply

Related Posts