Skip to content

Commit 334366c

Browse files
jaydeep099jaydeep099
authored
Added Animated Progress Loader (#1368)
1 parent 7ab5dae commit 334366c

File tree

3 files changed

+138
-0
lines changed

3 files changed

+138
-0
lines changed

‎Components/Loaders/Animated-Progress-Loader/index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Progress Bar</title>
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="circle" data-degree="86" data-color="#ff2972">
12+
<h2 class="number"></h2>
13+
<h4>Html</h4>
14+
</div>
15+
<div class="circle" data-degree="38" data-color="#fee800">
16+
<h2 class="number"></h2>
17+
<h4>Css</h4>
18+
</div>
19+
<div class="circle" data-degree="19" data-color="#04fc43">
20+
<h2 class="number"></h2>
21+
<h4>JavaScript</h4>
22+
</div>
23+
</div>
24+
<script>
25+
document.addEventListener("DOMContentLoaded", function (event) {
26+
let circles = document.querySelectorAll(".circle");
27+
circles.forEach(function (progress) {
28+
let degree = 0;
29+
let targetDegree = parseInt(progress.getAttribute("data-degree"));
30+
let color = progress.getAttribute("data-color");
31+
let number = progress.querySelector(".number");
32+
33+
let interval = setInterval(function () {
34+
degree += 1;
35+
if (degree > targetDegree) {
36+
clearInterval(interval);
37+
return;
38+
}
39+
progress.style.background = `conic-gradient(${color} ${degree}%, #222 0%)`;
40+
number.innerHTML = `${degree}<span>%</span>`;
41+
number.style.color = color;
42+
}, 50);
43+
});
44+
});
45+
</script>
46+
</body>
47+
</html>

‎Components/Loaders/Animated-Progress-Loader/style.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins", sans-serif;
8+
}
9+
10+
body {
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
min-height: 100vh;
15+
background: #363636;
16+
}
17+
18+
.container {
19+
position: relative;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
gap: 40px;
24+
}
25+
26+
.container .circle {
27+
position: relative;
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
flex-direction: column;
32+
width: 200px;
33+
height: 200px;
34+
border-radius: 50%;
35+
}
36+
37+
.container .circle::before {
38+
content: "";
39+
position: absolute;
40+
inset: 5px;
41+
border-radius: 50%;
42+
background: #222;
43+
opacity: 0.8;
44+
}
45+
46+
.container .circle::after {
47+
content: "";
48+
position: absolute;
49+
width: 120px;
50+
height: 120px;
51+
background: #333;
52+
border: 15px solid #4d4c51;
53+
border-radius: 50%;
54+
box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.75), 0 -2px 2px rgba(255, 255, 255, 0.5), inset 0 4px 2px rgba(0, 0, 0, 0.25), inset 0 -2px 2px rgba(255, 255, 255, 0.5);
55+
}
56+
57+
.container .circle .number {
58+
position: relative;
59+
color: #fff;
60+
z-index: 10;
61+
line-height: 1em;
62+
font-size: 2em;
63+
}
64+
65+
.container .circle .number span {
66+
font-size: 0.5em;
67+
font-weight: 500;
68+
}
69+
70+
.container .circle h4 {
71+
position: relative;
72+
color: #fff;
73+
z-index: 10;
74+
font-weight: 500;
75+
font-size: 0.8em;
76+
text-transform: uppercase;
77+
line-height: 0.6em;
78+
}

‎assets/html_files/loaders.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -687,6 +687,19 @@ <h1>Wifi Loader</h1>
687687
</a>
688688
</div>
689689
</div>
690+
<div class="box">
691+
<h1>Animated Progress Loader</h1>
692+
<div class="preview">
693+
<a href="../../Components/Loaders/Animated-Progress-Loader/index.html" title="Live Preview" target="_blank">
694+
<img src="../images/link.png">
695+
</a>
696+
</div>
697+
<div class="source">
698+
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Loaders/Animated-Progress-Loader" title="Source Code" target="_blank">
699+
<img src="../images/github.png">
700+
</a>
701+
</div>
702+
</div>
690703
</div>
691704
</section>
692705

0 commit comments

Comments
 (0)