Skip to content

Commit ad4df43

Browse files
alieldebaalieldeba
committed
changing loading screen
1 parent 95253f0 commit ad4df43

File tree

4 files changed

+82
-230
lines changed

4 files changed

+82
-230
lines changed

‎project/css/library/_loading.scss‎

Lines changed: 76 additions & 218 deletions
Original file line numberDiff line numberDiff line change
@@ -1,250 +1,108 @@
1-
@import url("https://fonts.googleapis.com/css?family=Amatic+SC");
2-
3-
$anim_time: 2.1; // main pan/pancake animation (in seconds)
4-
$flatten_deg: 85; // how round will the pancake be at the top/peak (in deg), affecting general animation though so not really adjustable
5-
$angle: 27; // max pan's angle while flipping (in deg)
6-
$peak: 40%; // pancake's highest level, obviously ;)
7-
$color_back: #ffde6b; // background
8-
$color: #333; // the rest
9-
10-
.loading {
11-
background-color: $color_back;
12-
height: 100vh;
13-
width: 100vw;
14-
overflow: hidden;
1+
@import "../library/variables.scss";
2+
.screen {
3+
position: fixed;
4+
top: 0;
5+
left: 0;
6+
right: 0;
7+
bottom: 0;
8+
background: $js;
9+
display: flex;
10+
align-items: center;
1511
}
1612

17-
h1 {
18-
position: relative;
19-
margin: 0 auto;
20-
top: 25vh;
21-
width: 100vw;
13+
.loader {
14+
width: 100%;
15+
height: 15px;
2216
text-align: center;
23-
font-family: "Amatic SC";
24-
font-size: 6vh;
25-
color: $color;
26-
opacity: 0.75;
27-
animation: pulse 2.5s linear infinite;
17+
position: absolute;
18+
top: 50%;
19+
left: 50%;
20+
transform: translate(-50%, -50%);
2821
}
2922

30-
#cooking {
23+
.dot {
3124
position: relative;
32-
margin: 0 auto;
33-
top: 0;
34-
width: 75vh;
35-
height: 75vh;
36-
overflow: hidden;
37-
.bubble {
38-
position: absolute;
39-
border-radius: 100%;
40-
box-shadow: 0 0 0.25vh lighten($color, 10%);
41-
opacity: 0;
42-
}
43-
.bubble:nth-child(1) {
44-
margin-top: 2.5vh;
45-
left: 58%;
46-
width: 2.5vh;
47-
height: 2.5vh;
48-
background-color: lighten($color, 7%);
49-
animation: bubble 2s cubic-bezier(0.53, 0.16, 0.39, 0.96) infinite;
50-
}
51-
.bubble:nth-child(2) {
52-
margin-top: 3vh;
53-
left: 52%;
54-
width: 2vh;
55-
height: 2vh;
56-
background-color: lighten($color, 4%);
57-
animation: bubble 2s ease-in-out 0.35s infinite;
58-
}
59-
.bubble:nth-child(3) {
60-
margin-top: 1.8vh;
61-
left: 50%;
62-
width: 1.5vh;
63-
height: 1.5vh;
64-
background-color: $color;
65-
animation: bubble 1.5s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.55s infinite;
66-
}
67-
.bubble:nth-child(4) {
68-
margin-top: 2.7vh;
69-
left: 56%;
70-
width: 1.2vh;
71-
height: 1.2vh;
72-
background-color: darken($color, 3%);
73-
animation: bubble 1.8s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.9s infinite;
74-
}
75-
.bubble:nth-child(5) {
76-
margin-top: 2.7vh;
77-
left: 63%;
78-
width: 1.1vh;
79-
height: 1.1vh;
80-
background-color: darken($color, 6%);
81-
animation: bubble 1.6s ease-in-out 1s infinite;
82-
}
83-
#area {
84-
position: absolute;
85-
bottom: 0;
86-
right: 0;
87-
width: 50%;
88-
height: 50%;
89-
background-color: transparent;
90-
transform-origin: 15% 60%;
91-
animation: flip #{$anim_time}s ease-in-out infinite;
92-
#sides {
93-
position: absolute;
94-
width: 100%;
95-
height: 100%;
96-
transform-origin: 15% 60%;
97-
animation: switchSide #{$anim_time}s ease-in-out infinite;
98-
#handle {
99-
position: absolute;
100-
bottom: 18%;
101-
right: 80%;
102-
width: 35%;
103-
height: 20%;
104-
background-color: transparent;
105-
border-top: 1vh solid $color;
106-
border-left: 1vh solid transparent;
107-
border-radius: 100%;
108-
transform: rotate(20deg) rotateX(0deg) scale(1.3, 0.9);
109-
}
110-
#pan {
111-
position: absolute;
112-
bottom: 20%;
113-
right: 30%;
114-
width: 50%;
115-
height: 8%;
116-
background-color: $color;
117-
border-radius: 0 0 1.4em 1.4em;
118-
transform-origin: -15% 0;
119-
}
120-
}
121-
#pancake {
122-
position: absolute;
123-
top: 24%;
124-
width: 100%;
125-
height: 100%;
126-
transform: rotateX(85deg);
127-
animation: jump #{$anim_time}s ease-in-out infinite;
128-
#pastry {
129-
position: absolute;
130-
bottom: 26%;
131-
right: 37%;
132-
width: 40%;
133-
height: 45%;
134-
background-color: $color;
135-
box-shadow: 0 0 3px 0 $color;
136-
border-radius: 100%;
137-
transform-origin: -20% 0;
138-
animation: fly #{$anim_time}s ease-in-out infinite;
139-
}
25+
width: 15px;
26+
height: 15px;
27+
margin: 0 2px;
28+
display: inline-block;
29+
30+
&:first-child {
31+
&:before,
32+
&:after {
33+
animation-delay: 0ms;
14034
}
14135
}
142-
}
14336

144-
@keyframes jump {
145-
0% {
146-
top: 24%;
147-
transform: rotateX(#{$flatten_deg}deg);
148-
}
149-
25% {
150-
top: 10%;
151-
transform: rotateX(0deg);
152-
}
153-
50% {
154-
top: 30%;
155-
transform: rotateX(#{$flatten_deg}deg);
156-
}
157-
75% {
158-
transform: rotateX(0deg);
159-
}
160-
100% {
161-
transform: rotateX(#{$flatten_deg}deg);
37+
&:last-child {
38+
&:before,
39+
&:after {
40+
animation-delay: 200ms;
41+
}
16242
}
163-
}
16443

165-
@keyframes flip {
166-
0% {
167-
transform: rotate(0deg);
168-
}
169-
5% {
170-
transform: rotate(-#{$angle}deg);
171-
}
172-
30%,
173-
50% {
174-
transform: rotate(0deg);
175-
}
176-
55% {
177-
transform: rotate(#{$angle}deg);
178-
}
179-
83.3% {
180-
transform: rotate(0deg);
181-
}
182-
100% {
183-
transform: rotate(0deg);
44+
&:before {
45+
content: "";
46+
position: absolute;
47+
left: 0;
48+
width: 15px;
49+
height: 15px;
50+
background-color: blue;
51+
animation-name: dotHover;
52+
animation-duration: 900ms;
53+
animation-timing-function: cubic-bezier(0.82, 0, 0.26, 1);
54+
animation-iteration-count: infinite;
55+
animation-delay: 100ms;
56+
background: white;
57+
border-radius: 100%;
18458
}
185-
}
18659

187-
@keyframes switchSide {
188-
0% {
189-
transform: rotateY(0deg);
190-
}
191-
50% {
192-
transform: rotateY(180deg);
193-
}
194-
100% {
195-
transform: rotateY(0deg);
60+
&:after {
61+
content: "";
62+
position: absolute;
63+
z-index: -1;
64+
background: black;
65+
box-shadow: 0px 0px 1px black;
66+
opacity: 0.2;
67+
width: 100%;
68+
height: 3px;
69+
left: 0;
70+
bottom: -2px;
71+
border-radius: 100%;
72+
animation-name: dotShadow;
73+
animation-duration: 900ms;
74+
animation-timing-function: cubic-bezier(0.82, 0, 0.26, 1);
75+
animation-iteration-count: infinite;
76+
animation-delay: 100ms;
19677
}
19778
}
19879

199-
@keyframes fly {
80+
@keyframes dotShadow {
20081
0% {
201-
bottom: 26%;
202-
transform: rotate(0deg);
82+
transform: scaleX(1);
20383
}
204-
10% {
205-
bottom: $peak;
206-
}
207-
50% {
208-
bottom: 26%;
209-
transform: rotate(-190deg);
210-
}
211-
80% {
212-
bottom: $peak;
213-
}
214-
100% {
215-
bottom: 26%;
216-
transform: rotate(0deg);
217-
}
218-
}
21984

220-
@keyframes bubble {
221-
0% {
222-
transform: scale(0.15, 0.15);
223-
top: 80%;
224-
opacity: 0;
225-
}
22685
50% {
227-
transform: scale(1.1, 1.1);
228-
opacity: 1;
86+
opacity: 0;
87+
transform: scaleX(0.6);
22988
}
89+
23090
100% {
231-
transform: scale(0.33, 0.33);
232-
top: 60%;
233-
opacity: 0;
91+
transform: scaleX(1);
23492
}
23593
}
23694

237-
@keyframes pulse {
95+
@keyframes dotHover {
23896
0% {
239-
transform: scale(1, 1);
240-
opacity: 0.25;
97+
top: 0px;
24198
}
99+
242100
50% {
243-
transform: scale(1.2, 1);
244-
opacity: 1;
101+
top: -50px;
102+
transform: scale(1.1);
245103
}
104+
246105
100% {
247-
transform: scale(1, 1);
248-
opacity: 0.25;
106+
top: 0;
249107
}
250108
}

‎project/html/library/loading.pug‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
.loading-wrapper
2-
.loading
3-
h1 Website Under Developming...
4-
#cooking
5-
- for (var i = 0; i < 5; i++)
6-
.bubble
7-
#area
8-
#sides
9-
#pan
10-
#handle
11-
#pancake
12-
#pastry
2+
.screen
3+
.loader
4+
.dot
5+
.dot
6+
.dot

‎website/css/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/images/logo.png‎

-1.92 KB
Binary file not shown.

0 commit comments

Comments
 (0)