Javascript 如何使用加载微调器启动Flatter web应用程序？

使用Flatter构建的web应用程序具有非常大的捆绑包大小，并且可能需要很长时间才能加载。在我的用例中，这不是一个真正的问题，用户不会反弹。但我想避免他们在没有任何反馈的情况下盯着白色屏幕看5-10秒

如何显示基于HTML/CSS的加载微调器，直到我的颤振web应用程序加载完毕

web应用程序嵌入到

web/index.html

中。我已经包含了一个小的Javascript代码片段，它要求用户在重新加载页面之前进行确认。这是正确执行的。
在这里，我发现了一个很好的自我容器html和css微调器：

如果我将微调器添加到一个空的html模板中，它可以正常工作。 但是如果我把它添加到

web/index.html

的主体中，它在屏幕上就不可见了

使用“inspect element”查看DOM时，我可以看到微调器已加载，但已被Flatter canvaskit渲染器覆盖。
在我看来，flatter几乎在页面加载时立即为这个渲染器设置div，然后花很长时间加载剩余的资源

---

在颤振完成所有准备工作之前，是否可以显示加载微调器？

本教程对我很有用：

只需创建css文件，以下是

web/

文件夹中的我的

styles.css

：

.loader，.loader:之后{
边界半径：50%；
宽度：10em；
高度：10公分；
}
.加载器{
保证金：60像素自动；
字体大小：10px；
位置：相对位置；
文本缩进：-9999em；
边框顶部：1.1米实心rgba（0、217、255、0.2）；
右边框：1.1米实心rgba（0、217、255、0.2）；
边框底部：1.1米实心rgba（0、217、255、0.2）；
左边框：1.1米实心#00d9ff；
-webkit转换：translateZ（0）；
-ms变换：translateZ（0）；
变换：translateZ（0）；
-webkit动画：load8 1.1s无限线性；
动画：load8 1.1s无限线性；
}
@-webkit关键帧加载8{
0% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}
@关键帧加载8{
0% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}

然后在

web/index.html

的

中导入css：

最后在

中添加微调器（它应该是主体的第一行）：

加载。。。

屏幕截图