Progressbar source code

HTML SOURCE CODE

 <div class="main">

<h1> Our progress bar</h1>
<p>We always try to teach you all programming knowledge and do our best.</p>

<!--###### The line starts from here ######-->

<h4>HTML (80%)</h4>
<div  class="animation">
<div class="box">
</div>
</div>

<!--######## New line code ######-->

<h4>CSS (70%)</h4>
<div  class="animation">
<div class="box1" >
</div>
</div>

<!--######## New line code ######-->

<h4>C++ (59%)</h4>
<div  class="animation">
<div class="box2" >
</div>
</div>

<!--######## New line code ######-->

<h4>JAVA (85%)</h4>
<div  class="animation">
<div class="box3" >
</div>
</div>

<!--######## New line code ######-->


<h4>PYTHON (99%)</h4>
<div  class="animation">
<div class="box4">
</div>
</div>

<!--######## New line code ######-->

<h4>NODE. JS (70%)</h4>
<div  class="animation">
<div class="box5" >
</div>
</div>

<!--######## New line code ######-->

<h4>JAVASCRIPT (65%)</h4>
<div  class="animation">
<div class="box6" >
</div>
</div>

<!--######## New line code ######-->

<h4>PHP (95%)</h4>
<div  class="animation">
<div class="box7" >
</div>
</div>
</div>
</div>

CSS SOURCE CODE

body{
background:black;
margin:0px;
padding:0px;

}
.main{
margin-left :15px;
margin-right:15px
}
h1{
padding-left:10px;
text-transform:uppercase;
font-size:20px;
color:gray ;
border-left:5px solid #808000;
margin-bottom:-4px;

}
p{
margin-bottom:30px;
color:gray;
margin-left:10px;
font-size:14px;
}
h4{
margin-bottom:-3px;
color:gray;
} 
.animation{
background:black;
border-radius:6px;
border:1px solid gray;
margin-top:6px;
}
.box{
width:10x;
height:7px;
background: orange;
border-radius:5px;
position: relative;
animation:harry 2.2s ease-in-out 0s  1 forwards;
}
@keyframes harry{
from{
  width:10px;
  box-shadow:1px 0px 14px orange;
}
to{
width:80%;
box-shadow:1px 0px 14px orange;
}
}
.box1{
width:10px;
height:6px;
background: green;
border-radius:5px;
position: relative;
animation:harry1 2.2s ease-in-out 0s  1 forwards;
}
@keyframes harry1{
from{
  width:10px;
  box-shadow:3px 2px 14px green;
}
to{
width:70%;
box-shadow:1px 2px 16px green;
}
}
.box2{
width:10x;
height:7px;
background: skyblue;
border-radius:5px;
position: relative;
animation:harry2 2.2s ease-in-out 0s  1 forwards;
}
@keyframes harry2{
from{
  width:10px;
  box-shadow:1px 0px 14px skyblue;
}
to{
width:59%;
box-shadow:1px 0px 14px skyblue;
}
}
.box3{
width:10x;
height:7px;
background: yellow;
border-radius:5px;
position: relative;
animation:harry3 2.2s ease-in-out  0s  1 forwards;
}
@keyframes harry3{
from{
  width:10px;
  box-shadow:1px 0px 14px yellow;
}
to{
width:85%;
box-shadow:1px 0px 14px yellow;
}
}
.box4{
width:10x;
height:7px;
background: #EB00FF;
border-radius:5px;
position: relative;
animation:harry4 2.2s ease-in-out 0s  1 forwards;
}

@keyframes harry4{
from{
  width:10px;
  box-shadow:1px 0px 14px #EB00FF;
}
to{
width:99%;
box-shadow:1px 0px 14px #EB00FF

;
}
}
.box5{
width:10px;
height:6px;
background: #00FACC;
border-radius:5px;
position: relative;
animation:harry5 2.2s ease-in-out 0s  1 forwards;
}
@keyframes harry5{
from{
  width:10px;
  box-shadow:3px 2px 14px #00FACC;
}
to{
width:90%;
box-shadow:1px 2px 16px #00FACC;
}
}
.box6{
width:10x;
height:7px;
background: #FA6600;
border-radius:5px;
position: relative;
animation:harry6 2.2s ease-in-out 0s  1 forwards;
}
@keyframes harry6{
from{
  width:10px;
  box-shadow:1px 0px 14px #FA6600;
}
to{
width:65%;
box-shadow:1px 0px 14px #FA6600
;
}
}
.box7{
width:10x;
height:7px;
background: #00CC0A
;
border-radius:5px;
position: relative;
animation:harry7 2.2s ease-in-out  0s  1 forwards;
}
@keyframes harry7{
from{
  width:10px;
  box-shadow:1px 0px 14px #00CC0A;
}
to{
width:95%;
box-shadow:1px 0px 14px #00CC0A;
}
}