React component.
return (
<div>
<div data-aos='fade-right' className="front">
<div className="skills">
<h1>Front-End</h1>
<li>
<h3>HTML</h3><span className="bar"><span className="html"></span></span>
</li>
<li>
<h3>CSS</h3><span className="bar"><span className="css"></span></span>
</li>
<li>
<h3>JavaScript</h3><span className="bar"><span className="javascript"></span></span>
</li>
<li>
<h3>React</h3><span className="bar"><span className="react"></span></span>
</li>
</div>
</div>
<div className="back">
</div>
</div>
);
CSS
* {
font-family: sans-serif;
list-style: none;
padding: 0;
}
.skills {
width: 500px;
margin: 60px auto;
color: black;
}
.skills li {
margin: 20px 0;
}
.bar {
background: #353B48;
display: block;
height: 2px;
height: 2px;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 0 10px #2187e7b3;
}
.bar span {
height: 2px;
float: left;
background: #2187e7;
}
.html {
width: 90%;
animation: html 2s;
}
@keyframes html {
0% {
width: 0%;
}
100% {
width: 90%;
}
}
.css {
width: 60%;
animation: css 2s;
}
.javascript {
width: 80%;
animation: javascript 2s;
}
.react {
width: 80%;
animation: react 2s;
}
@keyframes css {
0% {
width: 0%;
}
100% {
width: 60%;
}
}
@keyframes javascript {
0% {
width: 0%;
}
100% {
width: 80%;
}
}
@keyframes react {
0% {
width: 0%;
}
100% {
width: 80%;
}
}