问题描述
如何制作首先加载然后在 React(或不同的基于 JS 的框架)应用程序完全加载之前显示的全页加载器/微调器.
完全加载"是指浏览器的微调器停止旋转的那一刻.
我正在为非 js 渲染的网站做这些加载器/微调器，但我不确定如何为 JS 渲染的应用程序制作它们.
我如何知道根 div 何时充满了完全加载的 React 应用程序?
您可以将 index.html 中的加载标志放在任何 SPA(通常是 root 或 app).一旦加载了完整的应用程序，这将被覆盖.例如，在index.html的head标签内放置如下样式.
.loading {显示:内联块；宽度:30px；高度:30px；边框:2px 实心 rgba(0,0,0,.2);边界半径:50%；边框顶部颜色:rgba(0,0,0,.4);动画:旋转 1 秒缓入无限；-webkit-animation:旋转 1 秒缓入无限；左:计算(50%)；顶部:计算(50%)；位置:固定；z-索引:1；}@关键帧旋转{到 { -webkit-transform: 旋转(360 度)；}}@-webkit-keyframes 旋转 {到 { -webkit-transform: 旋转(360 度)；}}</风格>并将以下内容放入 body 标签中.
How to make fullpage loader/spinner that will load first and then will be shown until React (or different JS based framework) app fully loads.
With "fully load" I mean the moment when the browser's spinner stops spinning.
I was doing those loaders/spinners for non-js rendered websites, but I am not sure how to make them for JS-rendered apps.
How do I know when the root div is filled with fully loaded React app?
You can put a loading sign in index.html inside a div that is given to any SPA (usually root or app). This will be override as soon as full application is loaded. For example, put a following style inside the head tag of index.html.
<style>
.loading {
display: inline-block;
width: 30px;
height: 30px;
border: 2px solid rgba(0,0,0,.2 );
border-radius: 50%;
border-top-color: rgba(0,0,0,.4 );
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
left: calc(50%);
top: calc(50%);
position: fixed;
z-index: 1;
}
@keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
</style>
And put following inside the body tag.
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="app">
<div class="loading"></div>
</div>
</body>
这篇关于如何在 React App 完成加载之前显示整页加载器/微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！