如何使用加载微调器为 flutter web 应用程序添加前缀？
lhk*_*lhk 3 html javascript css flutter flutter-web
使用 flutter 构建的 Web 应用程序的包大小非常大，并且可能需要很长时间才能加载。在我的用例中，这并不是真正的问题，用户不会跳出。但我希望避免他们在没有任何反馈的情况下盯着白色屏幕 5-10 秒。
在我的 flutter web 应用程序加载之前，如何显示基于 HTML/CSS 的加载微调器？
Web 应用程序嵌入到web/index.html. 我已经包含了一个小的 Javascript 片段，要求用户在重新加载页面之前进行确认。这是正确执行的。
在这里我找到了一个很好的自容器 html 和 css spinner：https://projects.lukehaas.me/css-loaders/
如果我将微调器添加到空的 html 模板中，它就可以正常工作。但如果我将它添加到正文中，web/index.html它在屏幕上将不可见。
当使用“inspect element”查看 DOM 时，我可以看到微调器已加载，但被 flutter canvaskit 渲染器覆盖。
在我看来，flutter 几乎在页面加载时立即为该渲染器设置了 div，然后需要很长时间来加载剩余资源。
是否可以在 flutter 完成所有准备工作之前显示加载旋转器？
本教程对我来说效果很好：https://medium.com/flutter-community/adding-a-splash-screen-to-flutter-web-7930e5e44bd
只需创建您的 css 文件，这是我的文件夹styles.css内的web/：
.loader, .loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(0, 217, 255, 0.2);
border-right: 1.1em solid rgba(0, 217, 255, 0.2);
border-bottom: 1.1em solid rgba(0, 217, 255, 0.2);
border-left: 1.1em solid #00d9ff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
然后将您的 css 导入<head>您的web/index.html：
<head>
<!--
iOS meta tags & icons, etc...
-->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
最后将微调器添加到<body>（它应该是正文的第一行）：
<body>
<div class="loader">Loading...</div>
<!-- Register the service worker -->
</body>
截屏
