Skip to content

Commit 01329cf

Browse files
ParnaRoyChowdhury777ParnaRoyChowdhury777
authored
Added Book Loader (#1370)
1 parent 334366c commit 01329cf

File tree

3 files changed

+258
-0
lines changed

3 files changed

+258
-0
lines changed

‎Components/Loaders/Book-Loader/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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>Book Loader</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="loader">
11+
<div>
12+
<ul>
13+
<li>
14+
<svg fill="currentColor" viewBox="0 0 90 120">
15+
<path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
16+
</svg>
17+
</li>
18+
<li>
19+
<svg fill="currentColor" viewBox="0 0 90 120">
20+
<path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
21+
</svg>
22+
</li>
23+
<li>
24+
<svg fill="currentColor" viewBox="0 0 90 120">
25+
<path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
26+
</svg>
27+
</li>
28+
<li>
29+
<svg fill="currentColor" viewBox="0 0 90 120">
30+
<path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
31+
</svg>
32+
</li>
33+
<li>
34+
<svg fill="currentColor" viewBox="0 0 90 120">
35+
<path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
36+
</svg>
37+
</li>
38+
<li>
39+
<svg fill="currentColor" viewBox="0 0 90 120">
40+
<path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
41+
</svg>
42+
</li>
43+
</ul>
44+
</div><span>Loading</span></div>
45+
</body>
46+
</html>

‎Components/Loaders/Book-Loader/styles.css‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
margin: 0;
7+
background: #f0f0f0;
8+
}
9+
10+
.loader {
11+
--background: linear-gradient(135deg, #23C4F8, #275EFE);
12+
--shadow: rgba(39, 94, 254, 0.28);
13+
--text: #6C7486;
14+
--page: rgba(255, 255, 255, 0.36);
15+
--page-fold: rgba(255, 255, 255, 0.52);
16+
--duration: 3s;
17+
width: 200px;
18+
height: 140px;
19+
position: relative;
20+
}
21+
22+
.loader:before, .loader:after {
23+
--r: -6deg;
24+
content: "";
25+
position: absolute;
26+
bottom: 8px;
27+
width: 120px;
28+
top: 80%;
29+
box-shadow: 0 16px 12px var(--shadow);
30+
transform: rotate(var(--r));
31+
}
32+
33+
.loader:before {
34+
left: 4px;
35+
}
36+
37+
.loader:after {
38+
--r: 6deg;
39+
right: 4px;
40+
}
41+
42+
.loader div {
43+
width: 100%;
44+
height: 100%;
45+
border-radius: 13px;
46+
position: relative;
47+
z-index: 1;
48+
perspective: 600px;
49+
box-shadow: 0 4px 6px var(--shadow);
50+
background-image: var(--background);
51+
}
52+
53+
.loader div ul {
54+
margin: 0;
55+
padding: 0;
56+
list-style: none;
57+
position: relative;
58+
}
59+
60+
.loader div ul li {
61+
--r: 180deg;
62+
--o: 0;
63+
--c: var(--page);
64+
position: absolute;
65+
top: 10px;
66+
left: 10px;
67+
transform-origin: 100% 50%;
68+
color: var(--c);
69+
opacity: var(--o);
70+
transform: rotateY(var(--r));
71+
-webkit-animation: var(--duration) ease infinite;
72+
animation: var(--duration) ease infinite;
73+
}
74+
75+
.loader div ul li:nth-child(2) {
76+
--c: var(--page-fold);
77+
-webkit-animation-name: page-2;
78+
animation-name: page-2;
79+
}
80+
81+
.loader div ul li:nth-child(3) {
82+
--c: var(--page-fold);
83+
-webkit-animation-name: page-3;
84+
animation-name: page-3;
85+
}
86+
87+
.loader div ul li:nth-child(4) {
88+
--c: var(--page-fold);
89+
-webkit-animation-name: page-4;
90+
animation-name: page-4;
91+
}
92+
93+
.loader div ul li:nth-child(5) {
94+
--c: var(--page-fold);
95+
-webkit-animation-name: page-5;
96+
animation-name: page-5;
97+
}
98+
99+
.loader div ul li svg {
100+
width: 90px;
101+
height: 120px;
102+
display: block;
103+
}
104+
105+
.loader div ul li:first-child {
106+
--r: 0deg;
107+
--o: 1;
108+
}
109+
110+
.loader div ul li:last-child {
111+
--o: 1;
112+
}
113+
114+
.loader span {
115+
display: block;
116+
left: 0;
117+
right: 0;
118+
top: 100%;
119+
margin-top: 20px;
120+
text-align: center;
121+
color: var(--text);
122+
}
123+
124+
@keyframes page-2 {
125+
0% {
126+
transform: rotateY(180deg);
127+
opacity: 0;
128+
}
129+
130+
20% {
131+
opacity: 1;
132+
}
133+
134+
35%, 100% {
135+
opacity: 0;
136+
}
137+
138+
50%, 100% {
139+
transform: rotateY(0deg);
140+
}
141+
}
142+
143+
@keyframes page-3 {
144+
15% {
145+
transform: rotateY(180deg);
146+
opacity: 0;
147+
}
148+
149+
35% {
150+
opacity: 1;
151+
}
152+
153+
50%, 100% {
154+
opacity: 0;
155+
}
156+
157+
65%, 100% {
158+
transform: rotateY(0deg);
159+
}
160+
}
161+
162+
@keyframes page-4 {
163+
30% {
164+
transform: rotateY(180deg);
165+
opacity: 0;
166+
}
167+
168+
50% {
169+
opacity: 1;
170+
}
171+
172+
65%, 100% {
173+
opacity: 0;
174+
}
175+
176+
80%, 100% {
177+
transform: rotateY(0deg);
178+
}
179+
}
180+
181+
@keyframes page-5 {
182+
45% {
183+
transform: rotateY(180deg);
184+
opacity: 0;
185+
}
186+
187+
65% {
188+
opacity: 1;
189+
}
190+
191+
80%, 100% {
192+
opacity: 0;
193+
}
194+
195+
95%, 100% {
196+
transform: rotateY(0deg);
197+
}
198+
}
199+

‎assets/html_files/loaders.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -700,6 +700,19 @@ <h1>Animated Progress Loader</h1>
700700
</a>
701701
</div>
702702
</div>
703+
<div class="box">
704+
<h1>Book Loader</h1>
705+
<div class="preview">
706+
<a href="../../Components/Loaders/Book-Loader/index.html" title="Live Preview" target="_blank">
707+
<img src="../images/link.png">
708+
</a>
709+
</div>
710+
<div class="source">
711+
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Loaders/Book-Loader" title="Source Code" target="_blank">
712+
<img src="../images/github.png">
713+
</a>
714+
</div>
715+
</div>
703716
</div>
704717
</section>
705718

0 commit comments

Comments
 (0)