Use CSS variable (animation progress)
This is CSS sheet(progress bar)
/* progress animation */.progres-ani{ background-color: gray; width: 300px; padding: 10px 10px; margin: 0 auto; box-sizing: border-box; border: 3px solid black; border-radius: 10px;}.progres-ani li{ list-style-type: none; margin: 30px 0; font-weight: bolder; text-transform: uppercase; position: relative;}.progres-ani li::before{ content: ''; position: absolute; top: calc(100% + 7px); left: 0; border-radius: 1000px; background-color: rgba(202, 186, 186, 0.705); width: 100%; height: 15px;}.progres-ani li::after{ content: ''; position: absolute; top: calc(100% + 7px); left: 0; border-radius: 1000px; background-color: rgba(245, 244, 238, 0.705); width: 0; height: 15px;
animation-duration: 3s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: 3; /* animation-direction: forward; */ animation-fill-mode: forwards;}.progres-ani li.html102::after{ animation-name: html102;}@keyframes html102{ to{ width: 80%; background-color: rgb(236, 155, 3); }}.progres-ani li.css1::after{ animation-name: css1;}@keyframes css1{ to{ width: 70%; background-color: rgb(226, 47, 2); }}.progres-ani li.java1::after{ animation-name: java1;}@keyframes java1{ to{ width: 60%; background-color: rgb(47, 201, 8); }}.progres-ani li.python1::after{ animation-name: python1;}@keyframes python1{ to{ width: 50%; background-color: rgb(3, 228, 179); }}.progres-ani li.recat1::after{ animation-name: recat1;}@keyframes recat1{ to{ width: 65%; background-color: rgb(6, 96, 214); }}.progres-ani li.php1::after{ animation-name: php1;}@keyframes php1{ to{ width: 50%; background-color: rgb(87, 3, 243); }}.progres-ani li.js1::after{ animation-name: js1;}@keyframes js1{ to{ width: 60%; background-color: rgb(212, 5, 185); }} This is HTML sheet
/* progress animation */
.progres-ani{
background-color: gray;
width: 300px;
padding: 10px 10px;
margin: 0 auto;
box-sizing: border-box;
border: 3px solid black;
border-radius: 10px;
}
.progres-ani li{
list-style-type: none;
margin: 30px 0;
font-weight: bolder;
text-transform: uppercase;
position: relative;
}
.progres-ani li::before{
content: '';
position: absolute;
top: calc(100% + 7px);
left: 0;
border-radius: 1000px;
background-color: rgba(202, 186, 186, 0.705);
width: 100%;
height: 15px;
}
.progres-ani li::after{
content: '';
position: absolute;
top: calc(100% + 7px);
left: 0;
border-radius: 1000px;
background-color: rgba(245, 244, 238, 0.705);
width: 0;
height: 15px;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 3;
/* animation-direction: forward; */
animation-fill-mode: forwards;
}
.progres-ani li.html102::after{
animation-name: html102;
}
@keyframes html102{
to{
width: 80%;
background-color: rgb(236, 155, 3);
}
}
.progres-ani li.css1::after{
animation-name: css1;
}
@keyframes css1{
to{
width: 70%;
background-color: rgb(226, 47, 2);
}
}
.progres-ani li.java1::after{
animation-name: java1;
}
@keyframes java1{
to{
width: 60%;
background-color: rgb(47, 201, 8);
}
}
.progres-ani li.python1::after{
animation-name: python1;
}
@keyframes python1{
to{
width: 50%;
background-color: rgb(3, 228, 179);
}
}
.progres-ani li.recat1::after{
animation-name: recat1;
}
@keyframes recat1{
to{
width: 65%;
background-color: rgb(6, 96, 214);
}
}
.progres-ani li.php1::after{
animation-name: php1;
}
@keyframes php1{
to{
width: 50%;
background-color: rgb(87, 3, 243);
}
}
.progres-ani li.js1::after{
animation-name: js1;
}
@keyframes js1{
to{
width: 60%;
background-color: rgb(212, 5, 185);
}
}
<h1>This is CSS progress animation</h1><br>
<div class="progres-ani">
<li class="html102">html</li>
<li class="css1">css</li>
<li class="java1">java</li>
<li class="python1">python</li>
<li class="recat1">Recat</li>
<li class="php1">php</li>
<li class="js1">nodjs</li>
</div>
<div class="div-clear"><br><hr><br>
Comments
Post a Comment