Skip to content

Commit eef7eb1

Browse files
python019python019
committed
base
0 parents  commit eef7eb1

File tree

7 files changed

+194
-0
lines changed

7 files changed

+194
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎.gitattributes

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*.md linguist-language=js
2+
*.html linguist-language=js
3+
*.css linguist-language=js

‎README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div align="center">
2+
3+
# CSS Pancake Loader | Crimson
4+
5+
<img src="admin/base.png">
6+
7+
### by <a href="https://github.com/python019">SUBUX</a>
8+
9+
</div>

‎admin/.DS_Store

6 KB
Binary file not shown.

‎admin/base.png

98.4 KB
Loading

‎index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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>CSS Pancake Loader</title>
8+
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
12+
13+
<div class="loader">
14+
<div class="tall-stack">
15+
<div class="butter falling-element"></div>
16+
<div class="pancake falling-element"></div>
17+
<div class="pancake falling-element"></div>
18+
<div class="pancake falling-element"></div>
19+
<div class="pancake falling-element"></div>
20+
<div class="pancake falling-element"></div>
21+
<div class="pancake falling-element"></div>
22+
<div class="plate">
23+
<div class="plate-bottom"></div>
24+
<div class="shadow"></div>
25+
</div>
26+
</div>
27+
</div>
28+
29+
<footer class="footer"></footer>
30+
31+
</body>
32+
</html>

‎style.css

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
body {
2+
background: #249D98;
3+
overflow: hidden;
4+
}
5+
6+
.loader {
7+
position: absolute;
8+
top: 50%;
9+
left: 50%;
10+
transform: translate(-50%, -50%);
11+
}
12+
13+
.tall-stack {
14+
animation: slide-plate-out 6000ms infinite;
15+
animation-fill-mode: forwards;
16+
animation-timing-function: ease;
17+
}
18+
19+
.plate {
20+
width: 230px;
21+
height: 14px;
22+
background: #D3EBEA;
23+
position: relative;
24+
border-radius: 6px 6px 2rem 2rem;
25+
animation: slide-plate-in 6000ms infinite;
26+
transform: translateX(100vw);
27+
animation-fill-mode: forwards;
28+
animation-timing-function: ease;
29+
}
30+
.plate .plate-bottom {
31+
content: "";
32+
display: block;
33+
height: 50%;
34+
width: 140px;
35+
background: #c5e5e3;
36+
position: absolute;
37+
top: 100%;
38+
left: 50%;
39+
margin-left: -70px;
40+
border-radius: 0 0 1rem 1rem;
41+
z-index: 1;
42+
}
43+
.plate .shadow {
44+
position: absolute;
45+
top: 130%;
46+
left: 50%;
47+
margin-left: -90px;
48+
z-index: 0;
49+
width: 180px;
50+
height: 10px;
51+
background: rgba(0, 0, 0, 0.2);
52+
border-radius: 80%;
53+
z-index: 0;
54+
}
55+
56+
.butter {
57+
width: 48px;
58+
height: 12px;
59+
background: #EADD4D;
60+
margin: auto;
61+
border-radius: 2px;
62+
box-shadow: inset 0 -2px 0 2px rgba(85, 74, 35, 0.1);
63+
}
64+
65+
.pancake {
66+
width: 200px;
67+
height: 14px;
68+
background: #D8CB9F;
69+
border-radius: 1rem;
70+
box-shadow: inset 0 -2px 0 3px rgba(85, 74, 35, 0.1);
71+
margin: auto;
72+
}
73+
74+
.falling-element {
75+
transform: translateY(-100vh);
76+
animation-timing-function: ease-in;
77+
animation-fill-mode: forward;
78+
animation: element-drop 6000ms infinite;
79+
position: relative;
80+
}
81+
82+
.falling-element:nth-child(8) {
83+
animation-delay: 0.4s;
84+
}
85+
86+
.falling-element:nth-child(7) {
87+
animation-delay: 0.62s;
88+
}
89+
90+
.falling-element:nth-child(6) {
91+
animation-delay: 0.84s;
92+
}
93+
94+
.falling-element:nth-child(5) {
95+
animation-delay: 1.06s;
96+
}
97+
98+
.falling-element:nth-child(4) {
99+
animation-delay: 1.28s;
100+
}
101+
102+
.falling-element:nth-child(3) {
103+
animation-delay: 1.5s;
104+
}
105+
106+
.falling-element:nth-child(2) {
107+
animation-delay: 1.72s;
108+
}
109+
110+
.falling-element:nth-child(1) {
111+
animation-delay: 1.94s;
112+
}
113+
114+
@keyframes element-drop {
115+
0%, 100% {
116+
transform: translateY(-100vh) scaleY(0.7);
117+
opacity: 1;
118+
}
119+
11% {
120+
transform: translateY(20%) scaleY(1.2);
121+
}
122+
13% {
123+
transform: translateY(-30%) scaleY(0.9);
124+
}
125+
14%, 67% {
126+
transform: translateY(0%) scaleY(1);
127+
opacity: 1;
128+
}
129+
68% {
130+
opacity: 0;
131+
transition: none;
132+
transform: translateY(-100vh) scaleY(0.7);
133+
}
134+
}
135+
@keyframes slide-plate-in {
136+
0% {
137+
transform: translateX(100vw);
138+
}
139+
15%, 100% {
140+
transform: translateX(0);
141+
}
142+
}
143+
@keyframes slide-plate-out {
144+
65% {
145+
transform: translateX(0);
146+
}
147+
85%, 100% {
148+
transform: translateX(-100vw);
149+
}
150+
}

0 commit comments

Comments
 (0)