Dear Friends, In this article we will tell you how to make Neumorphism Progress Bar Using CSS with Animation? So i hope you like our artcle and if you want to get the source code related this artcle then you can get the given below code and paste your code editor for make changes.
Table of Contents
How to Start?
First of all learn html and css for make this Progress Bar Using CSS because it is make by using html and css. If you want to lean html and css then visit w3school website. It is a best site for learning programing languages and them get the manual try run button. After this doownload visual studio code for coding and install it in your system then you are ready for make it.
Progress Bar
Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this progress bar using css project make a fast with visual studio code editor.
HTML For Progress Bar
Here we are using html code and make it easy for using our website or any project just copy our code and paste you projects and website your progress bar using css create easily. Now first of all go to your starting body tag and give the div with class and class name is borders, give the style inline and make the margin-left 40px. After this give the another div tag with class name is p1. Same you can copy first div and paste total five time and change p1, p2, p3, p4, p5 for get the class name and give the style every classes. An i hope you understand with reading if you not understand any steps so we are give the source code for make a easy only copy the code and paste your code editor and make changes without coding.
Source Code..
<div style="margin-right: 40px;" class="borders">
<div class="p1"></div>
</div>
<div style="margin-right: 40px;" class="borders">
<div class="p2"></div>
</div>
<div style="margin-right: 40px;" class="borders">
<div class="p3"></div>
</div>
<div style="margin-right: 40px;" class="borders">
<div class="p4"></div>
</div>
<div class="borders">
<div class="p5"></div>
</div>CSS For Progress Bar Design.
If you want to give the style then you have three ways for using css first you can give using inline css and third you can give the internal css and fourth you can guve the external css. But we are using internal css in this project so if you want to choose another way for give the css style then this is depend on of your requirement. Here we are using internal css so go to your starting head tag and give the style tag under head tag in this tag give *{} tag and give margin 0, padding 0, box-sizing border-box. Then give the body tag and give display flex, justify-content center, align-items center, min-height 100vh, background #333. After this give the class borders like this .borders{} in this class give the width 40px and hight 300px then save it. After this give the background and boxshadow.
Now we will take the p1 class inside the border class, then make its width 100%, and also the height 100%, after that we will take background red and take border radius 20px. Then box shadow inset 09 10px black then position relative then animation animate 4s ease in out infinite.
.borders .p1{
width: 100%;
height: 100%;
background: red;
border-radius: 20px;
box-shadow: inset 0 0 10px black;
position: relative;
animation: animate 4s ease-in-out infinite;
}
Now we will animate p1 tag so let us know how we animate. First you have to take animate variable which is written after animation property in your p1. Then we will take the keyframe and after that we will enter the name of the variable which we copied from above, the animate then we will put it after the keyframe. Then inside it we will take the curly braces open and close in 0% then inside that we will do the transform translateY to 230px Something like this.
@keyframes animate{
0%{
transform: translateY(200px);
}
}
Now we are inside the class border which is p2. Take that and take its width 100%, height 100%, then background rgb. After that we will take border radius 20px then we will take box shadow inset 0 0 10px black then we will take position relative after that we will take animate2 variable in animation and play it infinite for 4s.
Again we will take keyframes tag and in that we will put animate2 variable after that we will take open curly braces and close curly braces with 0% then in this we will do transform translateY 230px.
.borders .p2{
width: 100%;
height: 100%;
background: rgb(3,207,3);
border-radius: 20px;
box-shadow: inset 0 0 10px black;
position: relative;
animation: animate2 4s ease-in-out infinite;
}
@keyframes animate2{
0%{
transform: translateY(230px);
}
}
Similarly, we will write the rest of the progress tag in the same way, just set the transform translateY to its own accord. After that you can copy and paste the rest of the code.
If you want to make with source code then copy css code and paste your code editor for make changes easily.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(54,54,54);
}
.borders{
width: 50px;
height: 350px;
border: 7px solid rgb(54,54,54);
border-radius: 30px;
box-shadow: inset 3px 5px 15px rgba(0,0,0,0.63),
-3px -5px 5px rgba(255,255,255,0.164),
3px 5px 15px rgba(0,0,0,0.63),
inset -3px -5px 5px rgba(255,255,255,0.164);
overflow: hidden;
}
.borders .p1{
width: 100%;
height: 100%;
background: red;
border-radius: 20px;
box-shadow: inset 0 0 10px black;
position: relative;
animation: animate 4s ease-in-out infinite;
}
@keyframes animate{
0%{
transform: translateY(200px);
}
}
.borders .p2{
width: 100%;
height: 100%;
background: rgb(3,207,3);
border-radius: 20px;
box-shadow: inset 0 0 10px black;
position: relative;
animation: animate2 4s ease-in-out infinite;
}
@keyframes animate2{
0%{
transform: translateY(230px);
}
}
.borders .p3{
width: 100%;
height: 100%;
background: yellow;
border-radius: 20px;
box-shadow: inset 0 0 10px black;
position: relative;
animation: animate3 4s ease-in-out infinite;
}
@keyframes animate3{
0%{
transform: translateY(250px);
}
}
.borders .p4{
width: 100%;
height: 100%;
background: rgb(0,255,179);
border-radius: 20px;
box-shadow: inset 0 0 10px black;
position: relative;
animation: animate4 4s ease-in-out infinite;
}
@keyframes animate4{
0%{
transform: translateY(210px);
}
}
.borders .p5{
width: 100%;
height: 100%;
background: rgb(255,0,140);
border-radius: 20px;
box-shadow: inset 0 0 10px black;
position: relative;
animation: animate5 4s ease-in-out infinite;
}
@keyframes animate5{
0%{
transform: translateY(250px);
}
}
