Flutter web app progress indicator before loading app?
In addition to answer of @Shahzad Akram you should remove the loading
div
because in Safari browser it may cause of flickering. So in the first screen you need to implement the folowing code (for example, in initState
method):
import 'package:universal_html/html.dart'
...
@override
void initState() {
super.initState()
// Remove `loading` div
final loader = document.getElementsByClassName('loading');
if(loader.isNotEmpty) {
loader.first.remove();
}
}
P.S. For nice loaders you can visit loading.io.
In your question you mentioned
Any code implemented in flutter would be the part of flutter app and it won't work,...
I assume you tried to add the splash screen approach for android or IOS. Since flutter-web is simply an index.html
and a couple of js files(for eg., main.dart.js
), you should perhaps try the CSS
loading animation trick. Since you didn't share any code I am not writing any code but the following would be my approach as explained by this red stapler video. He/she kindly provided a lot of CSS
based animations here along with the codepen implementations for that.
So following would be my steps in the flutter_web_project\web\index.html
file.
- Add a
span
element in the body ofindex.html
to show thecss
animation itself. - Create a
div
wrapper to position the span animation in yourindex.html
. - Then listen to the
onLoad
event of the window and remove thediv
element from your page or fade it out as described in the video.
With the help of @Abhilash, I was able to accomplish this. I got loader code from w3schools.
My project/web/index.html
is like this.
<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>