-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathloading.html
More file actions
129 lines (114 loc) · 6.38 KB
/
Copy pathloading.html
File metadata and controls
129 lines (114 loc) · 6.38 KB
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bucketlist</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.logo-container {
margin-bottom: 32px;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.logo-icon {
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
opacity: 0.5;
}
.logo-icon svg {
width: 100%;
height: 100%;
}
.logo-wordmark {
width: 180px;
margin: 0 auto 24px;
}
.logo-wordmark svg {
width: 100%;
height: auto;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin: 0 auto;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-text {
margin-top: 16px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 500;
}
.version {
margin-top: 8px;
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
}
</style>
</head>
<body>
<div class="loading-container">
<div class="logo-container">
<div class="logo-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.3 150.3">
<style>.st0 {fill: #f1f3e9;}</style>
<rect class="st0" x="60.9" y="106.9" width="28.3" height="4.9" />
<rect class="st0" x="60.9" y="98.5" width="28.3" height="4.9" />
<rect class="st0" x="60.9" y="90.1" width="28.3" height="4.9" />
<path class="st0" d="M75.1,0C33.6,0,0,33.6,0,75.1s33.6,75.1,75.1,75.1,75.1-33.6,75.1-75.1S116.6,0,75.1,0ZM104.9,118.4c-7.4,12.8-25.3,14.7-38.6,12.5-8-1.3-16-4.9-20.6-11.8l-13.4-50.2c5.1,2,10.4,3.2,15.8,4.1,11.8,1.9,23.8,2.2,35.8,1.7,11.6-.5,23.3-1.8,34.3-5.7l-13.4,49.5ZM119.2,62.6c-.2,1-3.7,2.2-4.8,2.6-17.1,6.2-45.6,6.1-63.6,3.5-6.7-1-13.9-2.4-19.9-5.8-.4-22.5,17.3-41.8,39.6-44.1,23.1-2.3,44.7,14.1,48.1,37.1.2,1.7.8,5.1.5,6.6Z" />
<path class="st0" d="M90.4,26.8c-20.8-8.8-44.6,1.8-52.1,22.9-.2.5-2.3,7.7-1.7,7.5,5.5-2.4,11.9-3.5,17.9-4.1,11.8-1.3,24.7-1.4,36.5-.5,7.5.6,15.6,1.7,22.6,4.6-1.5-13.3-11.1-25.2-23.3-30.4Z" />
</svg>
</div>
</div>
<div class="logo-wordmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.2 25.7">
<style>.st0{fill:#ffffff}</style>
<path class="st0" d="M0 21h2.3V5.6H0V1.3h10.5c1.1 0 2.2.2 3 .5.9.3 1.6.8 2.2 1.3.6.5 1.1 1.2 1.4 2 .3.8.5 1.6.5 2.5V8c0 1.4-.4 2.5-1.1 3.3-.8.8-1.7 1.4-2.9 1.7v.6c1.2.3 2.1.9 2.9 1.7.8.8 1.1 1.9 1.1 3.3v.4c0 .9-.2 1.7-.5 2.5s-.8 1.4-1.4 2c-.6.6-1.3 1-2.2 1.3-.9.3-1.9.5-3 .5H0V21Zm6.8-9.9h3.3c1 0 1.7-.2 2.3-.6.6-.4.9-1.1.9-2v-.2c0-1-.3-1.6-.9-2-.6-.4-1.4-.6-2.3-.6H6.8v5.5Zm0 9.9h3.3c1 0 1.7-.2 2.3-.6.6-.4.9-1.1.9-2.1v-.2c0-1-.3-1.6-.9-2.1-.6-.4-1.4-.6-2.3-.6H6.8v5.5ZM32.1 8.3h4.3v17h-4.3v-2.5h-.6c-.8 2-2.4 2.9-4.9 2.9s-1.6-.1-2.4-.4c-.7-.3-1.4-.7-1.9-1.3-.5-.6-1-1.3-1.3-2.1-.3-.9-.5-1.9-.5-3V8.3h4.3V18c0 1.2.3 2.2.9 2.8.6.7 1.4 1 2.6 1s2.3-.4 2.9-1.2c.6-.8.9-2 .9-3.4V8.3ZM56.2 19c-.4 2-1.3 3.6-2.8 4.9-1.4 1.2-3.4 1.8-5.8 1.8s-2.4-.2-3.5-.6c-1.1-.4-2-.9-2.8-1.7-.8-.7-1.4-1.6-1.9-2.7s-.7-2.3-.7-3.7v-.4c0-1.4.2-2.6.7-3.7.5-1.1 1.1-2 1.9-2.8.8-.8 1.8-1.4 2.8-1.8 1.1-.4 2.2-.6 3.5-.6 2.4 0 4.3.6 5.8 1.8s2.4 2.9 2.8 4.9L52 15.5c-.1-1-.6-1.9-1.3-2.6-.7-.7-1.8-1.1-3.1-1.1s-1.2.1-1.7.3c-.5.2-1 .6-1.4 1-.4.4-.7.9-1 1.5-.2.6-.4 1.3-.4 2v.2c0 .8.1 1.4.4 2 .2.6.6 1.1 1 1.5.4.4.9.7 1.4.9.5.2 1.1.3 1.7.3 1.3 0 2.3-.3 3-1 .7-.7 1.1-1.6 1.4-2.7l4.2 1.1ZM63.4 14.5h.8l4.5-6.2h4.7v.2l-5.5 7.8v.6l6 8.2v.2H69l-4.9-6.6h-.8v6.6H59v-24h4.3v13.2ZM78 18.2c0 .5.1 1 .4 1.4.2.4.5.8.9 1.1.4.3.8.5 1.3.7.5.2 1 .3 1.6.3 1.1 0 1.9-.2 2.5-.6.6-.4 1-.8 1.2-1.4l3.7 2.1c-.2.4-.5.9-.9 1.4-.4.5-.8.9-1.4 1.3-.6.4-1.3.7-2.1 1-.8.3-1.8.4-2.9.4s-2.4-.2-3.5-.6c-1.1-.4-2-1-2.7-1.8-.8-.8-1.4-1.7-1.8-2.8-.4-1.1-.6-2.4-.6-3.8v-.2c0-1.3.2-2.5.7-3.6.4-1.1 1.1-2 1.8-2.7.8-.8 1.7-1.3 2.7-1.8 1-.4 2.2-.6 3.3-.6s2.7.3 3.8.8c1 .5 1.9 1.2 2.6 2 .7.8 1.2 1.7 1.5 2.6.3.9.5 1.9.5 2.8v2.3H78.1Zm4.1-6.5c-1.1 0-2 .3-2.7.8-.7.6-1.1 1.2-1.3 1.9h8c-.1-.8-.6-1.5-1.3-2-.7-.5-1.6-.8-2.7-.8ZM91.1 8.3h5v-7h4.3v7h6.1v4.1h-6.1v7.7c0 .7.3 1 .9 1h4.6v4.1h-7.2c-.8 0-1.4-.3-1.9-.8s-.7-1.1-.7-1.9V12.3h-5V8.2ZM109 21.2h6V5.4h-5.8V1.3h10.1v19.9h5.5v4.1H109v-4.1ZM127.1 21.2h5.8v-8.8h-5.3V8.3h9.7v12.9h4.9v4.1h-15v-4.1Zm11.1-17.9c0 .5 0 .9-.3 1.3-.2.4-.4.7-.7 1-.3.3-.6.5-1 .7-.4.2-.8.3-1.2.3s-.9 0-1.3-.3c-.4-.2-.7-.4-1-.7-.3-.3-.5-.6-.7-1-.2-.4-.3-.8-.3-1.3s0-.9.3-1.3c.2-.4.4-.7.7-1 .3-.3.6-.5 1-.7.4-.2.8-.3 1.3-.3s.9 0 1.2.3c.4.2.7.4 1 .7.3.3.5.6.7 1 .2.4.3.8.3 1.3ZM148.5 13.1c0 .5.3.9.9 1.2.6.2 1.6.4 3.1.6 1.7.2 3.2.7 4.2 1.6 1.1.9 1.6 2 1.6 3.6v.2c0 1.7-.6 3-1.8 4-1.2 1-3 1.5-5.2 1.5s-2.5-.2-3.4-.5c-.9-.3-1.7-.8-2.3-1.3-.6-.5-1.1-1.1-1.4-1.7-.3-.6-.6-1.2-.7-1.8l4-1.3c.2.7.6 1.4 1.1 1.9s1.5.8 2.7.8 1.8-.2 2.2-.5c.4-.3.6-.7.6-1.1s0-.4-.2-.6c-.1-.2-.3-.4-.6-.5-.3-.2-.6-.3-1.1-.4-.5-.1-1.1-.2-1.8-.3-1.9-.2-3.4-.7-4.6-1.5-1.1-.8-1.7-2.1-1.7-3.7v-.2c0-.8.2-1.6.5-2.2.4-.6.8-1.2 1.4-1.6.6-.4 1.3-.8 2.1-1 .8-.2 1.6-.3 2.4-.3s2 .1 2.8.4c.8.3 1.5.6 2 1s1 .9 1.3 1.4.6 1 .8 1.5l-3.9 1.6c-.2-.6-.6-1.1-1.1-1.5-.5-.4-1.2-.5-2-.5s-1.3.1-1.6.4c-.4.3-.5.6-.5 1ZM158.7 8.3h5v-7h4.3v7h6.1v4.1H168v7.7c0 .7.3 1 .9 1h4.6v4.1h-7.2c-.8 0-1.4-.3-1.9-.8s-.7-1.1-.7-1.9V12.3h-5V8.2Z" />
</div>
</div>
<div class="loading-spinner"></div>
<p class="loading-text">Loading...</p>
<p class="version">v1.0.0</p>
</div>
</body>
</html>