loading-screen: 一个白屏过度的 loading 效果/lskit
在SPA项目中,经常会在首次渲染的时候,有白屏时间,这时我们可以利用一个 loading 效果过渡
项目主页: 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>
预览
