Skip to content

Commit ad7824b

Browse files
Aviral02gitAviral02git
authored
add Spiral-Spinner (#3261)
1 parent 75521f4 commit ad7824b

3 files changed

Lines changed: 140 additions & 0 deletions

File tree

‎Art/Aviral02git-Spiral-Spinner/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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>Spiral Spinner</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="spiral">
12+
<div class="dot dot1"></div>
13+
<div class="dot dot2"></div>
14+
<div class="dot dot3"></div>
15+
<div class="dot dot4"></div>
16+
<div class="dot dot5"></div>
17+
<div class="dot dot6"></div>
18+
<div class="dot dot7"></div>
19+
<div class="dot dot8"></div>
20+
</div>
21+
</div>
22+
</body>
23+
</html>

‎Art/Aviral02git-Spiral-Spinner/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Spiral Spinner",
3+
"githubHandle": "Aviral02git"
4+
}

‎Art/Aviral02git-Spiral-Spinner/styles.css‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: radial-gradient(circle, #1a1a2e 0%, #0f0f1e 100%);
9+
height: 100vh;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
overflow: hidden;
14+
}
15+
16+
.container {
17+
position: relative;
18+
}
19+
20+
.spiral {
21+
width: 300px;
22+
height: 300px;
23+
position: relative;
24+
animation: rotate 4s linear infinite;
25+
}
26+
27+
.dot {
28+
position: absolute;
29+
width: 20px;
30+
height: 20px;
31+
border-radius: 50%;
32+
top: 50%;
33+
left: 50%;
34+
transform-origin: center;
35+
animation: spiral 4s ease-in-out infinite;
36+
}
37+
38+
.dot1 {
39+
background: #ff006e;
40+
animation-delay: 0s;
41+
box-shadow: 0 0 20px #ff006e;
42+
}
43+
44+
.dot2 {
45+
background: #fb5607;
46+
animation-delay: 0.5s;
47+
box-shadow: 0 0 20px #fb5607;
48+
}
49+
50+
.dot3 {
51+
background: #ffbe0b;
52+
animation-delay: 1s;
53+
box-shadow: 0 0 20px #ffbe0b;
54+
}
55+
56+
.dot4 {
57+
background: #8ac926;
58+
animation-delay: 1.5s;
59+
box-shadow: 0 0 20px #8ac926;
60+
}
61+
62+
.dot5 {
63+
background: #1982c4;
64+
animation-delay: 2s;
65+
box-shadow: 0 0 20px #1982c4;
66+
}
67+
68+
.dot6 {
69+
background: #6a4c93;
70+
animation-delay: 2.5s;
71+
box-shadow: 0 0 20px #6a4c93;
72+
}
73+
74+
.dot7 {
75+
background: #f72585;
76+
animation-delay: 3s;
77+
box-shadow: 0 0 20px #f72585;
78+
}
79+
80+
.dot8 {
81+
background: #4cc9f0;
82+
animation-delay: 3.5s;
83+
box-shadow: 0 0 20px #4cc9f0;
84+
}
85+
86+
@keyframes rotate {
87+
0% {
88+
transform: rotate(0deg);
89+
}
90+
100% {
91+
transform: rotate(360deg);
92+
}
93+
}
94+
95+
@keyframes spiral {
96+
0% {
97+
transform: translate(-50%, -50%) rotate(0deg) translateX(0px) scale(0);
98+
opacity: 0;
99+
}
100+
25% {
101+
opacity: 1;
102+
}
103+
50% {
104+
transform: translate(-50%, -50%) rotate(180deg) translateX(80px) scale(1);
105+
}
106+
75% {
107+
opacity: 1;
108+
}
109+
100% {
110+
transform: translate(-50%, -50%) rotate(360deg) translateX(150px) scale(0);
111+
opacity: 0;
112+
}
113+
}

0 commit comments

Comments
 (0)