Skip to content

Commit 74f3c55

Browse files
Kcode727Kcode727
committed
Added Morph Loader
1 parent bc0f7d4 commit 74f3c55

File tree

4 files changed

+147
-0
lines changed

4 files changed

+147
-0
lines changed

‎MorphLoader/index.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
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>Morph Loader</title>
7+
<style>
8+
body {
9+
background-color: rgb(38, 40, 58);
10+
margin: 0;
11+
height: 100vh;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
overflow: hidden;
16+
}
17+
18+
.box {
19+
width: 40px;
20+
height: 40px;
21+
background: white;
22+
border-radius: 50%;
23+
position: relative;
24+
animation: magicMorph 4s ease-in-out infinite;
25+
box-shadow:
26+
0 0 25px rgba(255, 255, 255, 0.6),
27+
0 0 50px rgba(100, 200, 255, 0.4);
28+
transform: translateZ(0);
29+
will-change: transform, border-radius;
30+
}
31+
32+
@keyframes magicMorph {
33+
/* Start state */
34+
0%, 20% {
35+
transform: translateX(0) rotate(0deg) scale(1);
36+
border-radius: 50%;
37+
}
38+
39+
/* Forward transition */
40+
22% {
41+
transform: translateX(20px) rotate(45deg) scale(1.075);
42+
border-radius: 45%;
43+
}
44+
45+
24% {
46+
transform: translateX(40px) rotate(90deg) scale(1.15);
47+
border-radius: 40%;
48+
}
49+
50+
26% {
51+
transform: translateX(60px) rotate(135deg) scale(1.225);
52+
border-radius: 35%;
53+
}
54+
55+
28% {
56+
transform: translateX(80px) rotate(180deg) scale(1.3);
57+
border-radius: 30%;
58+
}
59+
60+
30% {
61+
transform: translateX(100px) rotate(225deg) scale(1.375);
62+
border-radius: 25%;
63+
}
64+
65+
32% {
66+
transform: translateX(120px) rotate(270deg) scale(1.45);
67+
border-radius: 20%;
68+
}
69+
70+
34% {
71+
transform: translateX(140px) rotate(315deg) scale(1.525);
72+
border-radius: 15%;
73+
}
74+
75+
36% {
76+
transform: translateX(160px) rotate(360deg) scale(1.6);
77+
border-radius: 10%;
78+
}
79+
80+
/* End state */
81+
36%, 60% {
82+
transform: translateX(160px) rotate(360deg) scale(1.6);
83+
border-radius: 10%;
84+
}
85+
86+
/* Backward transition */
87+
62% {
88+
transform: translateX(140px) rotate(315deg) scale(1.525);
89+
border-radius: 15%;
90+
}
91+
92+
64% {
93+
transform: translateX(120px) rotate(270deg) scale(1.45);
94+
border-radius: 20%;
95+
}
96+
97+
66% {
98+
transform: translateX(100px) rotate(225deg) scale(1.375);
99+
border-radius: 25%;
100+
}
101+
102+
68% {
103+
transform: translateX(80px) rotate(180deg) scale(1.3);
104+
border-radius: 30%;
105+
}
106+
107+
70% {
108+
transform: translateX(60px) rotate(135deg) scale(1.225);
109+
border-radius: 35%;
110+
}
111+
112+
72% {
113+
transform: translateX(40px) rotate(90deg) scale(1.15);
114+
border-radius: 40%;
115+
}
116+
117+
74% {
118+
transform: translateX(20px) rotate(45deg) scale(1.075);
119+
border-radius: 45%;
120+
}
121+
122+
76% {
123+
transform: translateX(0) rotate(0deg) scale(1);
124+
border-radius: 50%;
125+
}
126+
127+
/* Back to start state */
128+
76%, 100% {
129+
transform: translateX(0) rotate(0deg) scale(1);
130+
border-radius: 50%;
131+
}
132+
}
133+
</style>
134+
</head>
135+
<body>
136+
<div class="box"></div>
137+
</body>
138+
</html>

‎MorphLoader/morphLoader.gif‎

110 KB
Loading

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
8484
- [Mobile Menu Off Canvas](#mobile-menu-off-canvas)
8585
- [Modal/Popup](#modalpopup)
8686
- [Mondrian Composition](#mondrian-composition)
87+
- [Morph Loader](#morph-loader)
8788
- [Mouse Tracking](#mouse-tracking)
8889
- [Multi Step Checkout](#multi-step-checkout)
8990
- [NavBar](#navbar)
@@ -489,6 +490,14 @@ Your browser does not support the video tag.
489490

490491
---
491492

493+
## <a id="morph-loader"></a>Morph Loader
494+
495+
[<img src="images/morphLoader.gif" height="230" title="Morph Loader Demo">](./MorphLoader/index.html)
496+
497+
**[⬆ back to top](#quick-links)**
498+
499+
---
500+
492501
## <a id="compassloader"></a>Compass Loader
493502

494503
[<img src="images/CompassLoader.gif" height="230" title="Demo">](<[https://codepen.io/eduardoboucas/pen/BNyKwO](https://codepen.io/Aman-Pathan-the-typescripter/pen/dyaPmrE)>)

‎images/morphLoader.gif‎

110 KB
Loading

0 commit comments

Comments
 (0)