Skip to content

Commit 0dec55e

Browse files
thepranayguptathepranaygupta
committed
add: neumorph progress bar
1 parent 5a84519 commit 0dec55e

File tree

3 files changed

+143
-0
lines changed

3 files changed

+143
-0
lines changed

‎Loader/Loader_03/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## Neumorph Progress Bar
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> </p>
5+
6+
### Preview
7+
8+
![]()

‎Loader/Loader_03/code/index.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<html lang="en">
2+
<style>
3+
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@700&display=swap');
4+
</style>
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<title>Neumorph Progress Bar</title>
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
<body>
13+
14+
<div class="skills">
15+
<div class="outside-circle">
16+
<div class="inside-circle">
17+
<div id="progress">
18+
19+
</div>
20+
</div>
21+
</div>
22+
23+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
24+
25+
<defs>
26+
27+
<linearGradient id="GradientColor">
28+
29+
<stop offset="0%" stop-color="#e91e63" /> <stop offset="100%" stop-color="#673ab7" />
30+
31+
</linearGradient>
32+
33+
</defs>
34+
35+
<circle cx="80" cy="80" r="70" stroke-linecap="round" />
36+
37+
</svg>
38+
39+
</div>
40+
41+
<script>
42+
let progressNumber = document.getElementById("progress");
43+
let count =0;
44+
setInterval(()=>{
45+
if(count==75){
46+
clearInterval();
47+
}
48+
else{
49+
count+=1;
50+
progressNumber.innerHTML =count+"%";
51+
}
52+
53+
},23)
54+
55+
</script>
56+
57+
</body>
58+
</html>

‎Loader/Loader_03/code/style.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family:'Fira Sans', sans-serif;
6+
}
7+
body{
8+
background: color #e3edf7;;
9+
height: 100vh;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
14+
15+
}
16+
17+
.skills{
18+
19+
width: 160px;
20+
height: 160px;
21+
/* background-color:slateblue;*/
22+
23+
position: relative;
24+
25+
26+
}
27+
28+
.outside-circle{
29+
height: 160px;
30+
width: 160px;
31+
border-radius: 50%;
32+
padding: 20px;
33+
box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
34+
-6px -6px 10px -1px rgba(225, 225, 225, 0.7);
35+
}
36+
37+
.inside-circle{
38+
height: 120px;
39+
width: 120px;
40+
border-radius: 50%;
41+
display: flex;
42+
align-items: center;
43+
justify-content: center;
44+
box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
45+
inset -4px -4px 6px -1px rgba(225, 225, 225, 0.7),
46+
-0.5px -0.5px 0px rgba(225, 225, 225, 1),
47+
0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
48+
0px 12px 10px -10px rgba(0, 0, 0, 0.05);
49+
50+
}
51+
#progress{
52+
font-weight: 800px;
53+
font-size: large;
54+
color: #555;
55+
}
56+
57+
circle{
58+
fill: none;
59+
stroke: url(#GradientColor);
60+
stroke-width: 20px;
61+
stroke-dasharray: 472;
62+
stroke-dashoffset: 472;
63+
animation: anim 2s linear forwards;
64+
65+
66+
}
67+
svg{
68+
position: absolute;
69+
top: 0px;
70+
left: 0px;
71+
}
72+
@keyframes anim {
73+
100%{
74+
stroke-dashoffset: 118;
75+
}
76+
77+
}

0 commit comments

Comments
 (0)