Skip to content

Commit cd9dd72

Browse files
charlescytcharlescyt
committed
Add custom loading screen
1 parent e9e6f03 commit cd9dd72

File tree

3 files changed

+147
-36
lines changed

3 files changed

+147
-36
lines changed

‎lib/app.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ class _EagerInitialization extends ConsumerWidget {
5050
child: Text('Oops! Something went wrong.\nError: $error'),
5151
),
5252
),
53-
loading: () => const Center(child: CircularProgressIndicator.adaptive()),
53+
loading: () => const SizedBox.shrink(),
5454
);
5555
}
5656
}

‎web/flutter_bootstrap.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{{flutter_js}}
2+
{{flutter_build_config}}
3+
4+
const loadingContainer = document.getElementById("loading-container");
5+
const loadingText = document.getElementById("loading-text");
6+
7+
_flutter.loader.load({
8+
onEntrypointLoaded: async function (engineInitializer) {
9+
const appRunner = await engineInitializer.initializeEngine();
10+
await appRunner.runApp();
11+
12+
loadingContainer.classList.add("fade-out");
13+
14+
loadingContainer.addEventListener("transitionend", function () {
15+
loadingContainer.remove();
16+
});
17+
},
18+
});

‎web/index.html‎

Lines changed: 128 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,131 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<!--
5-
If you are serving your web app in a path other than the root, change the
6-
href value below to reflect the base path you are serving from.
7-
8-
The path provided below has to start and end with a slash "/" in order for
9-
it to work correctly.
10-
11-
For more details:
12-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
13-
14-
This is a placeholder for base href that will be replaced by the value of
15-
the `--base-href` argument provided to `flutter build`.
16-
-->
17-
<base href="$FLUTTER_BASE_HREF">
18-
19-
<meta charset="UTF-8">
20-
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
21-
<meta name="description" content="A new Flutter project.">
22-
23-
<!-- iOS meta tags & icons -->
24-
<meta name="mobile-web-app-capable" content="yes">
25-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
26-
<meta name="apple-mobile-web-app-title" content="dart_ast_node_viewer">
27-
<link rel="apple-touch-icon" href="icons/Icon-192.png">
28-
29-
<!-- Favicon -->
30-
<link rel="icon" type="image/png" href="favicon.png"/>
31-
32-
<title>dart_ast_node_viewer</title>
33-
<link rel="manifest" href="manifest.json">
34-
</head>
35-
<body>
36-
<script src="flutter_bootstrap.js" async></script>
37-
</body>
3+
<head>
4+
<!--
5+
If you are serving your web app in a path other than the root, change the
6+
href value below to reflect the base path you are serving from.
7+
8+
The path provided below has to start and end with a slash "/" in order for
9+
it to work correctly.
10+
11+
For more details:
12+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
13+
14+
This is a placeholder for base href that will be replaced by the value of
15+
the `--base-href` argument provided to `flutter build`.
16+
-->
17+
<base href="$FLUTTER_BASE_HREF" />
18+
19+
<meta charset="UTF-8" />
20+
<meta content="IE=Edge" http-equiv="X-UA-Compatible" />
21+
<meta name="description" content="A new Flutter project." />
22+
23+
<!-- iOS meta tags & icons -->
24+
<meta name="mobile-web-app-capable" content="yes" />
25+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
26+
<meta name="apple-mobile-web-app-title" content="dart_ast_node_viewer" />
27+
<link rel="apple-touch-icon" href="icons/Icon-192.png" />
28+
29+
<!-- Favicon -->
30+
<link rel="icon" type="image/png" href="favicon.png" />
31+
32+
<title>dart_ast_node_viewer</title>
33+
<link rel="manifest" href="manifest.json" />
34+
<style>
35+
:root {
36+
--bg-color: #0d1418;
37+
--text-color: #70d2ff;
38+
--spinner-color: #70d2ff;
39+
--spinner-size: 1em;
40+
--icon-size: 1em;
41+
}
42+
43+
body {
44+
margin: 0;
45+
padding: 0;
46+
overflow: hidden;
47+
background-color: var(--bg-color);
48+
font-family: system-ui, -apple-system, sans-serif;
49+
}
50+
51+
#loading-container {
52+
position: fixed;
53+
inset: 0;
54+
display: flex;
55+
flex-direction: column;
56+
justify-content: center;
57+
align-items: center;
58+
background-color: var(--bg-color);
59+
z-index: 9999;
60+
transition: opacity 0.8s ease;
61+
}
62+
63+
#loading-spinner {
64+
color: var(--spinner-color);
65+
font-size: 10px;
66+
width: var(--spinner-size);
67+
height: var(--spinner-size);
68+
border-radius: 50%;
69+
text-indent: -9999em;
70+
animation: mulShdSpin 1.3s infinite linear;
71+
transform: translateZ(0);
72+
will-change: box-shadow;
73+
}
74+
75+
@keyframes mulShdSpin {
76+
0%,
77+
100% {
78+
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em,
79+
-3em 0 0 -1em, -2em -2em 0 0;
80+
}
81+
12.5% {
82+
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em,
83+
-3em 0 0 -1em, -2em -2em 0 -1em;
84+
}
85+
25% {
86+
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em,
87+
-3em 0 0 -1em, -2em -2em 0 -1em;
88+
}
89+
37.5% {
90+
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em,
91+
-3em 0em 0 -1em, -2em -2em 0 -1em;
92+
}
93+
50% {
94+
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0,
95+
-3em 0em 0 -1em, -2em -2em 0 -1em;
96+
}
97+
62.5% {
98+
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em,
99+
-3em 0 0 0, -2em -2em 0 -1em;
100+
}
101+
75% {
102+
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0,
103+
-3em 0em 0 0.2em, -2em -2em 0 0;
104+
}
105+
87.5% {
106+
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0,
107+
-3em 0em 0 0, -2em -2em 0 0.2em;
108+
}
109+
}
110+
111+
#loading-text {
112+
color: var(--text-color);
113+
font-size: 1rem;
114+
text-align: center;
115+
position: absolute;
116+
bottom: 1rem;
117+
}
118+
119+
.fade-out {
120+
opacity: 0;
121+
}
122+
</style>
123+
</head>
124+
<body>
125+
<div id="loading-container">
126+
<div id="loading-spinner"></div>
127+
<div id="loading-text">Loading...</div>
128+
</div>
129+
<script src="flutter_bootstrap.js" async></script>
130+
</body>
38131
</html>

0 commit comments

Comments
 (0)