SPA应用:在应用加载前的添加加载动画

正常的 React 单页应用,如果没有做任何优化,会有一段时间的页面白屏时间,可以用下文中的方法进行优化
更新于: 2022-01-03 16:07:12

页面头上引入<title> 之前

<link rel='stylesheet' type='text/css' href='//unpkg.com/@jswork/loading-screen@1.0.2/dist/index.css' />

在 HTML 的 root 里添加内容如下

<div id='root'>
  <section class='loading-screen'>
    <div class='spinner'>
      <div class='rect1'></div>
      <div class='rect2'></div>
      <div class='rect3'></div>
      <div class='rect4'></div>
      <div class='rect5'></div>
    </div>
    <span>应用加载中</span>
  </section>
</div>

效果如下

加载中的应用
应用加载好的效果