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.
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;
}
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.
Post a Comment
Thank you
Learning robo team