Responsive Animated Skills Bar using HTML & CSS with modern UI

Responsive Animated Skills Bar using HTML & CSS with modern UI


Hello developers, today in this blog you'll learn to create a Responsive Animated Skills Bar using HTML & CSS with modern UI.

The skills bar is a scale that shows how good someone in that particular field or subject. When you are analyzing yourself, instead of writing a paragraph it is better to use this skills bar. In the portfolio, this skills bar can be used to show how good you are at that particular subject.

In this program [Animated Skills Bar], there are six skill bars with skill titles. These bars have an animation effect that is when you open or reload the web page, these skills bar displays horizontally with animation. The color of each skills bar is different. On reloading the web page, the color of each skill bar moves from left to the right which indicates how good you are at that particular subject or topic.

The source code of this Responsive Animated Skills Bar is given below, if you want the source code of this program, you can copy it. You can use this Responsive Animated Skills Bar code on your projects.

Responsive Animated Skills Bar using HTML & CSS with modern UI [Source Code]

To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Animated skill bar </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>My Skills</h1> <div class="bar html5" data-skill="HTML5"></div> <div class="bar css3" data-skill="CSS3"></div> <div class="bar javascript" data-skill="JAVASCRIPT"></div> <div class="bar python" data-skill="Python"></div> <div class="bar php" data-skill="PHP"></div> <div class="bar typescript" data-skill="TYPESCRIPT"></div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive and page responsive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


body{
    font-family: Helvetica, Arial, sans-serif;
    background-color: #202124;
  }
  .container{
    position: relative;
    top:90px;  
    width: 80%;
    height:400px;
    margin:auto;
    padding:25px;
    border-radius: 12px;
    background-color: #08AEEA;
    background-image: linear-gradient(270deg, #08AEEA 0%, #2AF598 100%);
  }
  .container >h1{
text-align: center;
  }
  @keyframes load{
    from {
      width: 0%
    }
  }
  @-webkit-keyframes load{
    from {
      width: 0%
    }
  }
  @-moz-keyframes load{
    from {
      width: 0%
    }
  }
  @-o-keyframes load{
    from {
      width: 0%
    }
  }
  
  .bar{
    background-color: #12192c;
    padding: 2px;
    border-radius: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #121;
    font-weight: 600;
  }
  .bar::before{
    content:  attr(data-skill);
    background-color: #f3b0ff;
    display: inline-block;
    padding: 5px 0 5px 10px;
    border-radius: inherit;
    animation: load 2s 0s;
    -webkit-animation: load 3s 0s;
    -moz-animation: load 3s 0s;
    -o-animation: load 3s 0s;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  
  .bar.html5::before{
    background-color: #ffa200;
    width: calc(20% - 10px);
  }
  .bar.css3::before{
    background-color: hsla(208, 100%, 52%,1);
    width: calc(40% - 10px);
  }
  .bar.javascript::before{
    background-color: hsla(147, 100%, 41%,1);
    width: calc(60% - 10px);
  }
  .bar.python::before{
      background-color: hsla(48, 92%, 57%,1);
    width: calc(80% - 10px);
  }
  .bar.php::before{
      background-color: hsla(279, 92%, 57%,1);
    width: calc(90% - 10px);
  }
  .bar.typescript::before{
    background-color: rgba(244, 66, 198,1);
  width: calc(95% - 10px);
}

.credit{
    text-align: center;
    color: #000;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.credit a{
    text-decoration: none;
    color:#000;
    font-weight: bold;
}
We hope you would like this Responsive Animated Skills Bar using HTML & CSS with modern UI.

Thank you for reading our blog. If you face any problem in creating this Responsive Animated Skills Bar using HTML & CSS with modern UI, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome