Skip to content

Commit 51744e7

Browse files
AmanPathanAmanPathan
authored
Added Compass Loader Code
1 parent 888df6f commit 51744e7

File tree

3 files changed

+324
-0
lines changed

3 files changed

+324
-0
lines changed

‎CompassLoader/CompassLoader.gif

2.13 MB
Loading

‎CompassLoader/index.html

+209
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
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+
<link rel="stylesheet" href="./style.css">
7+
<title>Compass Loader</title>
8+
</head>
9+
<body>
10+
<svg
11+
class="pl"
12+
viewBox="0 0 160 160"
13+
width="160px"
14+
height="160px"
15+
xmlns="http://www.w3.org/2000/svg"
16+
>
17+
<defs>
18+
<linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
19+
<stop offset="0%" stop-color="#000" />
20+
<stop offset="100%" stop-color="#fff" />
21+
</linearGradient>
22+
<mask id="mask1">
23+
<rect x="0" y="0" width="160" height="160" fill="url(#grad)" />
24+
</mask>
25+
<mask id="mask2">
26+
<rect x="28" y="28" width="104" height="104" fill="url(#grad)" />
27+
</mask>
28+
</defs>
29+
<g>
30+
<g class="pl__ring-rotate">
31+
<circle
32+
class="pl__ring-stroke"
33+
cx="80"
34+
cy="80"
35+
r="72"
36+
fill="none"
37+
stroke="hsl(223,90%,55%)"
38+
stroke-width="16"
39+
stroke-dasharray="452.39 452.39"
40+
stroke-dashoffset="452"
41+
stroke-linecap="round"
42+
transform="rotate(-45,80,80)"
43+
/>
44+
</g>
45+
</g>
46+
<g mask="url(#mask1)">
47+
<g class="pl__ring-rotate">
48+
<circle
49+
class="pl__ring-stroke"
50+
cx="80"
51+
cy="80"
52+
r="72"
53+
fill="none"
54+
stroke="hsl(193,90%,55%)"
55+
stroke-width="16"
56+
stroke-dasharray="452.39 452.39"
57+
stroke-dashoffset="452"
58+
stroke-linecap="round"
59+
transform="rotate(-45,80,80)"
60+
/>
61+
</g>
62+
</g>
63+
<g>
64+
<g
65+
stroke-width="4"
66+
stroke-dasharray="12 12"
67+
stroke-dashoffset="12"
68+
stroke-linecap="round"
69+
transform="translate(80,80)"
70+
>
71+
<polyline
72+
class="pl__tick"
73+
stroke="hsl(223,10%,90%)"
74+
points="0,2 0,14"
75+
transform="rotate(-135,0,0) translate(0,40)"
76+
/>
77+
<polyline
78+
class="pl__tick"
79+
stroke="hsl(223,10%,90%)"
80+
points="0,2 0,14"
81+
transform="rotate(-90,0,0) translate(0,40)"
82+
/>
83+
<polyline
84+
class="pl__tick"
85+
stroke="hsl(223,10%,90%)"
86+
points="0,2 0,14"
87+
transform="rotate(-45,0,0) translate(0,40)"
88+
/>
89+
<polyline
90+
class="pl__tick"
91+
stroke="hsl(223,10%,90%)"
92+
points="0,2 0,14"
93+
transform="rotate(0,0,0) translate(0,40)"
94+
/>
95+
<polyline
96+
class="pl__tick"
97+
stroke="hsl(223,10%,90%)"
98+
points="0,2 0,14"
99+
transform="rotate(45,0,0) translate(0,40)"
100+
/>
101+
<polyline
102+
class="pl__tick"
103+
stroke="hsl(223,10%,90%)"
104+
points="0,2 0,14"
105+
transform="rotate(90,0,0) translate(0,40)"
106+
/>
107+
<polyline
108+
class="pl__tick"
109+
stroke="hsl(223,10%,90%)"
110+
points="0,2 0,14"
111+
transform="rotate(135,0,0) translate(0,40)"
112+
/>
113+
<polyline
114+
class="pl__tick"
115+
stroke="hsl(223,10%,90%)"
116+
points="0,2 0,14"
117+
transform="rotate(180,0,0) translate(0,40)"
118+
/>
119+
</g>
120+
</g>
121+
<g mask="url(#mask1)">
122+
<g
123+
stroke-width="4"
124+
stroke-dasharray="12 12"
125+
stroke-dashoffset="12"
126+
stroke-linecap="round"
127+
transform="translate(80,80)"
128+
>
129+
<polyline
130+
class="pl__tick"
131+
stroke="hsl(223,90%,80%)"
132+
points="0,2 0,14"
133+
transform="rotate(-135,0,0) translate(0,40)"
134+
/>
135+
<polyline
136+
class="pl__tick"
137+
stroke="hsl(223,90%,80%)"
138+
points="0,2 0,14"
139+
transform="rotate(-90,0,0) translate(0,40)"
140+
/>
141+
<polyline
142+
class="pl__tick"
143+
stroke="hsl(223,90%,80%)"
144+
points="0,2 0,14"
145+
transform="rotate(-45,0,0) translate(0,40)"
146+
/>
147+
<polyline
148+
class="pl__tick"
149+
stroke="hsl(223,90%,80%)"
150+
points="0,2 0,14"
151+
transform="rotate(0,0,0) translate(0,40)"
152+
/>
153+
<polyline
154+
class="pl__tick"
155+
stroke="hsl(223,90%,80%)"
156+
points="0,2 0,14"
157+
transform="rotate(45,0,0) translate(0,40)"
158+
/>
159+
<polyline
160+
class="pl__tick"
161+
stroke="hsl(223,90%,80%)"
162+
points="0,2 0,14"
163+
transform="rotate(90,0,0) translate(0,40)"
164+
/>
165+
<polyline
166+
class="pl__tick"
167+
stroke="hsl(223,90%,80%)"
168+
points="0,2 0,14"
169+
transform="rotate(135,0,0) translate(0,40)"
170+
/>
171+
<polyline
172+
class="pl__tick"
173+
stroke="hsl(223,90%,80%)"
174+
points="0,2 0,14"
175+
transform="rotate(180,0,0) translate(0,40)"
176+
/>
177+
</g>
178+
</g>
179+
<g>
180+
<g transform="translate(64,28)">
181+
<g class="pl__arrows" transform="rotate(45,16,52)">
182+
<path
183+
fill="hsl(3,90%,55%)"
184+
d="M17.998,1.506l13.892,43.594c.455,1.426-.56,2.899-1.998,2.899H2.108c-1.437,0-2.452-1.473-1.998-2.899L14.002,1.506c.64-2.008,3.356-2.008,3.996,0Z"
185+
/>
186+
<path
187+
fill="hsl(223,10%,90%)"
188+
d="M14.009,102.499L.109,58.889c-.453-1.421,.559-2.889,1.991-2.889H29.899c1.433,0,2.444,1.468,1.991,2.889l-13.899,43.61c-.638,2.001-3.345,2.001-3.983,0Z"
189+
/>
190+
</g>
191+
</g>
192+
</g>
193+
<g mask="url(#mask2)">
194+
<g transform="translate(64,28)">
195+
<g class="pl__arrows" transform="rotate(45,16,52)">
196+
<path
197+
fill="hsl(333,90%,55%)"
198+
d="M17.998,1.506l13.892,43.594c.455,1.426-.56,2.899-1.998,2.899H2.108c-1.437,0-2.452-1.473-1.998-2.899L14.002,1.506c.64-2.008,3.356-2.008,3.996,0Z"
199+
/>
200+
<path
201+
fill="hsl(223,90%,80%)"
202+
d="M14.009,102.499L.109,58.889c-.453-1.421,.559-2.889,1.991-2.889H29.899c1.433,0,2.444,1.468,1.991,2.889l-13.899,43.61c-.638,2.001-3.345,2.001-3.983,0Z"
203+
/>
204+
</g>
205+
</g>
206+
</g>
207+
</svg>
208+
</body>
209+
</html>

‎CompassLoader/style.css

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
* {
2+
border: 0;
3+
box-sizing: border-box;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
:root {
8+
--hue: 223;
9+
--bg: hsl(var(--hue), 90%, 25%);
10+
--fg: hsl(var(--hue), 10%, 90%);
11+
--trans-dur: 0.3s;
12+
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
13+
}
14+
body {
15+
background: #000;
16+
color: var(--fg);
17+
font: 1em/1.5 sans-serif;
18+
height: 100vh;
19+
display: grid;
20+
place-items: center;
21+
}
22+
.pl {
23+
display: block;
24+
width: 9.375em;
25+
height: 9.375em;
26+
}
27+
.pl__arrows,
28+
.pl__ring-rotate,
29+
.pl__ring-stroke,
30+
.pl__tick {
31+
animation-duration: 2s;
32+
animation-timing-function: linear;
33+
animation-iteration-count: infinite;
34+
}
35+
.pl__arrows {
36+
animation-name: arrows;
37+
transform: rotate(45deg);
38+
transform-origin: 16px 52px;
39+
}
40+
.pl__ring-rotate,
41+
.pl__ring-stroke {
42+
transform-origin: 80px 80px;
43+
}
44+
.pl__ring-rotate {
45+
animation-name: ringRotate;
46+
}
47+
.pl__ring-stroke {
48+
animation-name: ringStroke;
49+
transform: rotate(-45deg);
50+
}
51+
.pl__tick {
52+
animation-name: tick;
53+
}
54+
.pl__tick:nth-child(2) {
55+
animation-delay: -1.75s;
56+
}
57+
.pl__tick:nth-child(3) {
58+
animation-delay: -1.5s;
59+
}
60+
.pl__tick:nth-child(4) {
61+
animation-delay: -1.25s;
62+
}
63+
.pl__tick:nth-child(5) {
64+
animation-delay: -1s;
65+
}
66+
.pl__tick:nth-child(6) {
67+
animation-delay: -0.75s;
68+
}
69+
.pl__tick:nth-child(7) {
70+
animation-delay: -0.5s;
71+
}
72+
.pl__tick:nth-child(8) {
73+
animation-delay: -0.25s;
74+
}
75+
76+
/* Animations */
77+
@keyframes arrows {
78+
from {
79+
transform: rotate(45deg);
80+
}
81+
to {
82+
transform: rotate(405deg);
83+
}
84+
}
85+
@keyframes ringRotate {
86+
from {
87+
transform: rotate(0);
88+
}
89+
to {
90+
transform: rotate(720deg);
91+
}
92+
}
93+
@keyframes ringStroke {
94+
from,
95+
to {
96+
stroke-dashoffset: 452;
97+
transform: rotate(-45deg);
98+
}
99+
50% {
100+
stroke-dashoffset: 169.5;
101+
transform: rotate(-180deg);
102+
}
103+
}
104+
@keyframes tick {
105+
from,
106+
3%,
107+
47%,
108+
to {
109+
stroke-dashoffset: -12;
110+
}
111+
14%,
112+
36% {
113+
stroke-dashoffset: 0;
114+
}
115+
}

0 commit comments

Comments
 (0)