I’ve encountered a problem, on android devices, show unrendered content with no styles, no data-binding at app start for a very short time. On PC, no problem, I think PC’s power make this procedure pretty short.
I’ve tried to use a custom static html cover to cover the unrendered content, but it didn’t work.
The cover is like this
#loading-bg {
background-color: #fff;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
z-index: 5;
align-content: center;
}
.spinloader {
border: 16px solid #f3f3f3; /* Light grey /
border-top: 16px solid #3498db; / Blue /
border-bottom: 16px solid #3498db; / Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s ease-in-out infinite;
-webkit-animation: spin 2s ease-in-out infinite;
position: fixed;
margin-left: -60px;
margin-top: -60px;
left: 50%;
top: 50%;
}
Wherever I put it, cousin to root div, or in the <f7-page>, it doesn’t display at all.
I use framework7-vue v1.
How can I fix it, or is there any other way to prevent it to display unrendered content, please help.