loading-screen: 一个白屏过度的 loading 效果/lskit

在SPA项目中，经常会在首次渲染的时候，有白屏时间，这时我们可以利用一个 loading 效果过渡
更新于: 2024-01-29 11:32:20
项目主页: https://github.com/afeiship/loading-screen

安装

直接在 html 页面（一般在 public 目录下），引入如下 css 文件。

<!--1. add styles -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@jswork/loading-screen/dist/index.css"/>
<!-- OR -->
<link rel='stylesheet' type='text/css' href='https://unpkg.com/@jswork/loading-screen/dist/index.css' />
<!-- 项目中推荐换成具体版本、也可以存到自己的cdn/oss上使用 -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@jswork/loading-screen@1.0.3/dist/index.css"/>

在 html 结构中添加如下代码

<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>

配置(可选)

这个不是必须的，但有时候，你的项目需要根据主题色，稍作调整。

<head>
  <!--your code...-->
  <style>
  .loading-screen{
    --ls-opts-top: 37.5%;
    --ls-opts-bar-color: #1890ff;
    --ls-opts-bar-width: 4px;
    --ls-opts-text-color: #999;
  }
  </style>
</head>

带国际化

假设你的 app 的 url为: http://www.dev.com?language=en-US

<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 id="loading"></span>
    </section>
    <script>
        const el = document.querySelector('#loading');
        const lang = new URL(window.location.href).searchParams.get('language');
        el.innerHTML = lang === 'en-US' ? 'Loading...' : '应用加载中...';
    </script>
</div>

与 lskit 结合

用了这个就不需要写 HTML 到模板中去了。

  • 默认配置
  • 项目接入使用
lskit({
  "id": "root",
  "lang": "zh-CN",
  "en-US": "Loading...",
  "zh-CN": "应用加载中...",
})
<script defer src="https://unpkg.com/@jswork/loading-screen/dist/lskit.js"></script>
<script>lskit()</script>

完整配置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel='stylesheet' type='text/css' href='https://unpkg.com/@jswork/loading-screen@1.0.4/dist/index.css' />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script src="https://unpkg.com/@jswork/loading-screen@1.0.4/dist/lskit.js"></script>
  <script>window.lskit();</script>
</body>

</html>

需要自定义

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Apply AI</title>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <style>
      /* HTML: <div class="loader"></div> */
      .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        margin: -25px 0 0 -25px;
        padding: 8px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #ccc;
        --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
        -webkit-mask: var(--_m);
        mask: var(--_m);
        -webkit-mask-composite: source-out;
        mask-composite: subtract;
        animation: l3 1s infinite linear;
      }
      @keyframes l3 {
        to {
          transform: rotate(1turn);
        }
      }
    </style>
  </head>
  <body>
    <div id="root" class="h-screen">
      <div class="loader"></div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
    <script>
      if (global === undefined) {
        var global = window;
      }
    </script>
  </body>
</html>

预览