Skip to content

Commit efa5ab6

Browse files
aayush105aayush105
authored
Merge pull request #721 from gurramtejaswini/master
A simple Circular Progressive bar
2 parents 2584b48 + 52a2ec4 commit efa5ab6

4 files changed

+260
-0
lines changed

‎Advanced Circular Progress Bar - Google Chrome 2024-11-22 00-42-07.mp4

8.97 MB
Binary file not shown.

‎CSS Circular Progress Bar - Google Chrome 2024-11-22 00-27-07.mp4

10.4 MB
Binary file not shown.

‎circ.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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>CSS Circular Progress Bar</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
height: 100vh;
15+
background-color: #f5f5f5;
16+
font-family: Arial, sans-serif;
17+
}
18+
19+
.progress-circle {
20+
width: 150px;
21+
height: 150px;
22+
position: relative;
23+
}
24+
25+
.circle {
26+
width: 100%;
27+
height: 100%;
28+
background: #e6e6e6;
29+
border-radius: 50%;
30+
position: relative;
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
overflow: hidden;
35+
}
36+
37+
.mask {
38+
width: 100%;
39+
height: 100%;
40+
position: absolute;
41+
clip: rect(0, 150px, 150px, 75px); /* Clip the circle in half */
42+
}
43+
44+
.fill {
45+
width: 100%;
46+
height: 100%;
47+
background: #4caf50;
48+
border-radius: 50%;
49+
position: absolute;
50+
clip: rect(0, 75px, 150px, 0);
51+
transform: rotate(0deg);
52+
animation: rotateFill 2s linear infinite;
53+
}
54+
55+
.inside-circle {
56+
width: 120px;
57+
height: 120px;
58+
background: #fff;
59+
border-radius: 50%;
60+
position: absolute;
61+
z-index: 1;
62+
display: flex;
63+
justify-content: center;
64+
align-items: center;
65+
font-size: 1.5em;
66+
font-weight: bold;
67+
color: #333;
68+
}
69+
70+
@keyframes rotateFill {
71+
0% {
72+
transform: rotate(0deg);
73+
}
74+
100% {
75+
transform: rotate(360deg);
76+
}
77+
}
78+
</style>
79+
</head>
80+
<body>
81+
<div class="progress-circle">
82+
<div class="circle">
83+
<div class="mask">
84+
<div class="fill"></div>
85+
</div>
86+
<div class="inside-circle">70%</div>
87+
</div>
88+
</div>
89+
</body>
90+
</html>

‎circular.html

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Advanced Circular Progress Bar</title>
8+
<style>
9+
/* Global Reset */
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
flex-direction: column;
21+
height: 100vh;
22+
background: radial-gradient(circle, #0f0f0f, #1a1a1a, #2a2a2a);
23+
font-family: "Arial", sans-serif;
24+
color: #fff;
25+
gap: 2rem;
26+
}
27+
28+
h3 {
29+
font-size: 2.5rem;
30+
text-transform: uppercase;
31+
letter-spacing: 2px;
32+
margin-bottom: 1rem;
33+
color: #f8f8f8;
34+
text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
35+
}
36+
37+
.progress-container {
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
flex-direction: column;
42+
}
43+
44+
.circle-progress {
45+
position: relative;
46+
width: 200px;
47+
height: 200px;
48+
background: linear-gradient(145deg, #333, #444);
49+
border-radius: 50%;
50+
display: flex;
51+
justify-content: center;
52+
align-items: center;
53+
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
54+
transition: transform 0.3s ease;
55+
}
56+
57+
.circle-progress:hover {
58+
transform: scale(1.1);
59+
}
60+
61+
.circle-progress svg {
62+
position: absolute;
63+
width: 100%;
64+
height: 100%;
65+
transform: rotate(-90deg); /* Start at top */
66+
}
67+
68+
.circle-progress svg circle {
69+
fill: none;
70+
stroke-width: 12;
71+
stroke-linecap: round;
72+
}
73+
74+
.circle-progress svg circle:nth-child(1) {
75+
stroke: rgba(255, 255, 255, 0.1); /* Background circle */
76+
}
77+
78+
.circle-progress svg circle:nth-child(2) {
79+
stroke: url(#gradient); /* Progress circle with dynamic gradient */
80+
stroke-dasharray: 565; /* Circumference = 2 * PI * r (r = 90) */
81+
stroke-dashoffset: calc(565 - (565 * var(--progress)) / 100);
82+
animation: progressAnim 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
83+
}
84+
85+
/* Radial Gradient Definition */
86+
.gradient {
87+
position: absolute;
88+
width: 100%;
89+
height: 100%;
90+
inset: 0;
91+
z-index: -1;
92+
background: radial-gradient(circle, var(--clr1), var(--clr2));
93+
filter: blur(10px);
94+
border-radius: 50%;
95+
opacity: 0.5;
96+
animation: glowAnim 3s ease-in-out infinite;
97+
}
98+
99+
@keyframes glowAnim {
100+
0%,
101+
100% {
102+
opacity: 0.5;
103+
}
104+
50% {
105+
opacity: 0.8;
106+
}
107+
}
108+
109+
.number {
110+
position: absolute;
111+
inset: 0;
112+
display: flex;
113+
justify-content: center;
114+
align-items: center;
115+
flex-direction: column;
116+
color: #fff;
117+
text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
118+
}
119+
120+
.number h4 {
121+
font-size: 3rem;
122+
font-weight: bold;
123+
}
124+
125+
.number h4 span {
126+
font-size: 1.5rem;
127+
font-weight: 400;
128+
}
129+
130+
.number p {
131+
font-size: 1rem;
132+
font-weight: 300;
133+
letter-spacing: 1.5px;
134+
text-transform: uppercase;
135+
color: rgba(255, 255, 255, 0.8);
136+
}
137+
138+
/* Progress Animation */
139+
@keyframes progressAnim {
140+
0% {
141+
stroke-dashoffset: 565;
142+
}
143+
100% {
144+
stroke-dashoffset: calc(565 - (565 * var(--progress)) / 100);
145+
}
146+
}
147+
</style>
148+
</head>
149+
<body>
150+
<h3>Advanced Circular Progress</h3>
151+
152+
<!-- Progress Circle -->
153+
<div class="progress-container">
154+
<div
155+
class="circle-progress"
156+
style="--progress: 75; --clr1: #ff6f61; --clr2: #ff2d2d"
157+
>
158+
<div class="gradient"></div>
159+
<svg>
160+
<circle cx="100" cy="100" r="90"></circle>
161+
<circle cx="100" cy="100" r="90"></circle>
162+
</svg>
163+
<div class="number">
164+
<h4>75<span>%</span></h4>
165+
<p>Completion</p>
166+
</div>
167+
</div>
168+
</div>
169+
</body>
170+
</html>

0 commit comments

Comments
 (0)