preface
What is a Spa application? What are the advantages? What are the disadvantages? Here is not to teach fish to suck eggs, we are estimated to be no more familiar with familiar. First loading is a pain point. If you want to solve this problem completely, the best way is to render the server. The second is to use a plug-in to do the preloading. The next best thing is to do something to improve the user experience during the load time (which is the simplest and most straightforward way).
If we do nothing, we are likely to have the following situation, a blank 👇.
If your users can accept it, that’s great, but many users will say: why is it that when I first enter the XX app, there is a blank page? Why is that? Can we not use this page? Do you tell your users that this is xx loading, not a blank page? She’s not gonna be able to take that.
So, it would be perfect if we could add some sort of transition to the page load time. For example, add some loading animation, the user will know, oh, it is loading, such as this effect 👇
This is an example of an Ant Design Pro experience.
implementation
The implementation here is super easy, super simple, just paste the code directly, no logic, just some simple CSS animation. Just go ahead and change it in index.html.
Vue 🌰
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Viewport-fit =cover, width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
<title></title>/ / add<style>
#app{
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
flex-direction: column;
}
#app .loading-wrap {
padding: 98px;
display: flex;
justify-content: center;
align-items: center
}
.dot {
animation: loading 1.2 s infinite linear;
transform: rotate(45deg);
position: relative;
display: inline-block;
font-size: 32px;
width: 32px;
height: 32px;
box-sizing: border-box
}
.dot i {
width: 14px;
height: 14px;
position: absolute;
display: block;
background-color: #1890ff;
border-radius: 100%;
transform: scale(.75);
transform-origin: 50% 50%;
opacity:.3;
animation: loadingSpinMove 1s infinite linear alternate
}
.dot i:nth-child(1) {
top: 0;
left: 0
}
.dot i:nth-child(2) {
top: 0;
right: 0;
-webkit-animation-delay:.4s;
animation-delay:.4s
}
.dot i:nth-child(3) {
right: 0;
bottom: 0;
-webkit-animation-delay:.8s;
animation-delay:.8s
}
.dot i:nth-child(4) {
bottom: 0;
left: 0;
-webkit-animation-delay: 1.2 s;
animation-delay: 1.2 s
}
@keyframes loading {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg)}}@-webkit-keyframes loading {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg)}}@keyframes loadingSpinMove {
to {
opacity: 1}}@-webkit-keyframes loadingSpinMove {
to {
opacity: 1}}</style>
</head>
<body>
<div id="app">/ / add<div class="loading-wrap">
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
</div>
</div>
</body>
</html>
Copy the codeThe react 🌰
React code from Ant Design Pro, because the principle is the same, too lazy to write.
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="theme-color" content="#1890ff" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = 0"
/>
<title>Ant Design Pro</title>
<link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />
</head>
<body>
<noscript>
<div class="noscript-container">
Hi there! Please
<div class="noscript-enableJS">
<a href="https://www.enablejavascript.io/en" target="_blank" rel="noopener noreferrer">
<b>enable Javascript</b>
</a>
</div>
in your browser to use Ant Design, Out-of-the-box mid-stage front/design solution!
</div>
</noscript>
<div id="root">
<style>
html.body.#root {
height: 100%;
margin: 0;
padding: 0;
}
#root {
background-repeat: no-repeat;
background-size: 100% auto;
}
.noscript-container {
display: flex;
align-content: center;
justify-content: center;
margin-top: 90px;
font-size: 20px;
font-family: 'Lucida Sans'.'Lucida Sans Regular'.'Lucida Grande'.'Lucida Sans Unicode',
Geneva, Verdana, sans-serif;
}
.noscript-enableJS {
padding-right: 3px;
padding-left: 3px;
}
.page-loading-warp {
display: flex;
align-items: center;
justify-content: center;
padding: 98px;
}
.ant-spin {
position: absolute;
display: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rgba(0.0.0.0.65);
color: #1890ff;
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
text-align: center;
list-style: none;
opacity: 0;
-webkit-transition: -webkit-transform 0.3 s cubic-bezier(0.78.0.14.0.15.0.86);
transition: -webkit-transform 0.3 s cubic-bezier(0.78.0.14.0.15.0.86);
transition: transform 0.3 s cubic-bezier(0.78.0.14.0.15.0.86);
transition: transform 0.3 s cubic-bezier(0.78.0.14.0.15.0.86),
-webkit-transform 0.3 s cubic-bezier(0.78.0.14.0.15.0.86);
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
}
.ant-spin-spinning {
position: static;
display: inline-block;
opacity: 1;
}
.ant-spin-dot {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
font-size: 20px;
}
.ant-spin-dot-item {
position: absolute;
display: block;
width: 9px;
height: 9px;
background-color: #1890ff;
border-radius: 100%;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0.3;
-webkit-animation: antspinmove 1s infinite linear alternate;
animation: antSpinMove 1s infinite linear alternate;
}
.ant-spin-dot-item:nth-child(1) {
top: 0;
left: 0;
}
.ant-spin-dot-item:nth-child(2) {
top: 0;
right: 0;
-webkit-animation-delay: 0.4 s;
animation-delay: 0.4 s;
}
.ant-spin-dot-item:nth-child(3) {
right: 0;
bottom: 0;
-webkit-animation-delay: 0.8 s;
animation-delay: 0.8 s;
}
.ant-spin-dot-item:nth-child(4) {
bottom: 0;
left: 0;
-webkit-animation-delay: 1.2 s;
animation-delay: 1.2 s;
}
.ant-spin-dot-spin {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: antrotate 1.2 s infinite linear;
animation: antRotate 1.2 s infinite linear;
}
.ant-spin-lg .ant-spin-dot {
width: 32px;
height: 32px;
font-size: 32px;
}
.ant-spin-lg .ant-spin-dot i {
width: 14px;
height: 14px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ant-spin-blur {
background: #fff;
opacity: 0.5; }}@-webkit-keyframes antSpinMove {
to {
opacity: 1; }}@keyframes antSpinMove {
to {
opacity: 1; }}@-webkit-keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg); }}@keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg); }}</style>
<div
style=" display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 420px; "
>
<img src="<%= context.config.publicPath +'pro_icon.svg'%>" alt="logo" width="256" />
<div class="page-loading-warp">
<div class="ant-spin ant-spin-lg ant-spin-spinning">
<span class="ant-spin-dot ant-spin-dot-spin"
><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
></span>
</div>
</div>
<div style="display: flex; align-items: center; justify-content: center">
<img
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
width="32"
style="margin-right: 8px"
/>
Ant Design
</div>
</div>
</div>
</body>
</html>
Copy the codeThe last
Thank you for reading, there is a better way to improve the first load user experience, welcome to leave a comment, discussion ~ ❤️