Explore My All Videos

How To Create Animated Skills Bars Using HTML CSS Jquery..

In this video I have tell you how to create Animated Skills Bars Using HTML CSS Jquery..This video has been prepared on behalf of you.
Hello readers, Today you'll learn how to create an Animated Skills Bar using only HTML & CSS. Earlier I've shared a blog on how to create a Custom Animated Range Slider using JavaScript and now it's time to create a pure CSS animated Skills Bar.
If you don’t already know them, no need to worry. I simplified this tutorial as best as I could, so you would survive :)

The Skill Bar allows you to show your info or skills stylishly and attractively in a form of percentage bars just like the horizontal bar. It is a quick, easy, and colorful way to display your skills to your site visitors and content viewers.

In this program [Animated Skill Bar], on the webpage, there are five skill bars with the skill titles and their skill percentages. These skills bars are purely based on HTML & CSS only and these bars also have animation, which means when you reload your webpage, these skill bars display horizontally with awesome animation. You can copy the codes from the given boxes or download the code files from the given link but I recommend you to download the source code files instead of copying codes
Here are the source code of this Calculator

To create this program (Animated Skills Bar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.

HTML File:
<!DOCTYPE html>  <html lang="en"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <div class="skills"> <div class="skill"> <div class="skill-name">HTML</div> <div class="skill-bar"> <div class="skill-per" per=90></div> </div> </div> <div class="skill"> <div class="skill-name">Css</div> <div class="skill-bar"> <div class="skill-per" per=50></div> </div> </div> <div class="skill"> <div class="skill-name">Javascript</div> <div class="skill-bar"> <div class="skill-per" per=18></div> </div> </div> </div> <script type="text/javascript"> $('.skill-per').each(function(){ var $this = $(this); var per = $this.attr('per'); $this.css("width",per+'%'); $({animatedValue: 0}).animate({animatedValue: per},{ duration: 1000, step:function(){ $this.attr('per', Math.floor(this.animatedValue) + '%'); }, complete:function(){ $this.attr('per', Math.floor(this.animatedValue) + '%'); } }); }); </script> </body> </html>

CSS FILE:

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
}

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

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

.skill-bar{
  height: 20px;
  background: #cacaca;
  border-radius: 8px;
}

.skill-per{
  height: 20px;
  background: linear-gradient(280deg, rgba(22,255,17,1), rgba(245,255,0,1), rgba(255,0,0,1));
  border-radius: 8px;
  width: 0;
  transition: 1s linear;
  position: relative;
}

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

.skill-per::after{
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #16ff11;
  top: -16px;
  right: 0;
  transform: translateX(50%) rotate(45deg);
}

How To Create Animated Skills Bars Using HTML CSS Jquery..

Explore My All Videos

How To Create Animated Skills Bars Using HTML CSS Jquery..

Here are the source code of this Calculator

Comments

Search This Blog

Random Posts

Labels

Popular Posts

Labels

Pages

Archive

Labels

Contact Form