加载应用程序前，Web应用程序进度指示器波动? [英] Flutter web app progress indicator before loading app?
问题描述
您好，我是移动应用程序开发人员，对Web开发不太熟悉，我发现在加载抖动的Web应用程序(如Gmail加载屏幕)之前，有任何方法可以实现进度指示器. Flutter网站很酷，但是加载应用程序需要花费一些时间.我们可以在此加载持续时间内添加任何指标吗?在flutter中实现的任何代码都将成为flutter应用程序的一部分，并且将无法正常工作，应该有另一种方法来实现这一目标.
Hi I am a mobile app developer and not much familiar with web development, I was finding any approach to implement Progress Indicator before loading the flutter web app like Gmail loading screen. Flutter web is cool but it takes few moments before loading the app. Can we add any indicator for this loading duration? Any code implemented in flutter would be the part of flutter app and it won't work, There should be another approach to achieve this.
推荐答案
在@Abhilash的帮助下，我能够完成此任务.我从 w3schools 中获取了加载器代码.
With the help of @Abhilash, I was able to accomplish this. I got loader code from w3schools.
我的project/web/index.html就是这样.
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script defer src="index.dart.js" type="application/javascript"></script>
<style>
.loading {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid blue;
border-right: 16px solid green;
border-bottom: 16px solid red;
border-left: 16px solid pink;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loading">
<div class="loader"></div>
</div>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
这篇关于加载应用程序前，Web应用程序进度指示器波动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
