如何制作首先加载然后在 React（或不同的基于 JS 的框架）应用程序完全加载之前显示的全页加载器/微调器。
“完全加载”是指浏览器的微调器停止旋转的那一刻。
我正在为非 js 渲染的网站做这些加载器/微调器，但我不确定如何为 JS 渲染的应用程序制作它们。
我怎么知道根 div 何时充满了完全加载的 React 应用程序？
如何在 React App 完成加载之前显示整页加载器/微调器
IT技术
javascript
html
css
reactjs
web-applications
2021-05-22 05:18:47
1个回答
您可以在index.html任何 SPA（通常为root或app）的 div 中放置一个加载标志。一旦加载了完整的应用程序，这将被覆盖。例如，把下面的风格里面head的标签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>
并将以下内容放入 body 标签中。
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="app">
<div class="loading"></div>
</div>
</body>
其它你可能感兴趣的问题