JourneySaveParserHtml/loading.html at main · Coldknife2/JourneySaveParserHtml · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<div class="loader">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="svg">
		<g>
			<g>
				<polygon class="cls-1" points="18.29 54.86 27.43 54.86 27.43 64 0 64 0 36.57 9.14 36.57 9.14 45.71 18.29 45.71 18.29 54.86" />
				<polygon class="cls-1" points="64 36.57 64 64 36.57 64 36.57 54.86 45.71 54.86 45.71 45.71 54.86 45.71 54.86 36.57 64 36.57" />
				<polygon class="cls-1" points="27.43 18.78 27.43 9.64 27.43 0 0 0 0 9.14 18.29 9.14 18.29 18.29 0 18.29 0 27.43 27.43 27.43 27.43 18.78" />
				<polygon class="cls-1" points="64 18.78 64 9.64 64 0 36.57 0 36.57 9.14 54.86 9.14 54.86 18.29 36.57 18.29 36.57 27.43 64 27.43 64 18.78" />
			</g>
		</g>
	</svg>
<div class="bubble" />
</div>

<style scoped>
html {
	background: #BD9973;
}

body {
	margin: 0;
}

.loader {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100%;
}

.bubble {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle at center, transparent 15%, #fff 60%, transparent 62%);
	animation: chirp 4s ease-in-out infinite;
}

.svg {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	fill: #fff;
	width: 70px;
	height: 70px;
	animation: symbol 4s ease-in-out infinite;
}

@keyframes chirp {
	0% {
		opacity: 0;
		transform: scale(0.1);
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

@keyframes symbol {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%);
	}
	10% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(.2);
	}
	40% {
		opacity: 1;
	}
	70% {
		transform: translate(-50%, -50%) scale(.8);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(.8);
		opacity: 0;
	}
}
</style>