Loader by Nawsome

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