# Create a new css folder under the static folder, and then create a loading.css file under the css folder
.container {
position: relative;
text-align: center;
width: 100px;
}
.item {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background: #969aec;;
animation: item 1s ease-in-out infinite;
}
.b {
animation-delay: .2s;
}
.c {
animation-delay: .4s;
}
@keyframes item {
0% {
transform: translateY(0);
opacity: 1;
}
50% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
# Reference the loading.css file in the index.html page
<link rel="stylesheet" type="text/css" href="static/css/loading.css">
# Insert a div in the body of the index.html page
<div>的 id = " loading "- style:
- style = “margin: 0 auto;” // div is centered horizontally
- style = "font-size: 18px;" // font size 18px
- style = "text-align: center;" // The text is centered horizontally
<div id="loading"><div id="app">The purpose of putting it in front is to give priority to waiting for loading animation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>chenbz</title>
<!-- 引入加载动画 -->
<link rel="stylesheet" type="text/css" href="static/css/loading.css">
</head>
<body>
<div id="loading">
<div style="padding: 300px 0;">
<div class="container" style="margin: 0 auto;">
<div class="item a"></div>
<div class="item b"></div>
<div class="item c"></div>
</div>
<p style="font-size: 18px; margin-top: 30px; text-align: center;">页面加载中，喝口水先，不急。</p>
</div>
</div>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
# App.view
Add in App.vue
created() {
let loading = document.getElementById("loading");
if (loading !== null) {
document.body.removeChild(loading);
}
}
- Get the DOM with id = "loading", and if it can be obtained, remove it from the body.
- Loading here means that the homepage has been initialized, so you can remove the waiting animation
App.vue complete code:
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
created() {
let loading = document.getElementById("loading");
if (loading !== null) {
document.body.removeChild(loading);
}
}
}
</script>
<style>
</style>
The css animation is reproduced from: https://www.jianshu.com/p/9b2a71fa25e5 , there are other animation css codes
Related Reading:
30 CSS3 cool page pre-loading animation effects (recommended): http://www.ibloger.net/article/1558.html
Loaders.css Various pure CSS loading progress animation effects: http: //www.ibloger. net / article / 1568.html
load-awesome 53 pure CSS3 preloading page loading indicator animation special effects: http://www.ibloger.net/article/1800.html
CSS3-Preloaders 6 CSS3 preloading loading indicator animation Special effects: http://www.ibloger.net/article/1556.html
Button special effects are based on Loading of SVG and Segment.js: http://www.ibloger.net/article/1554.htmlOriginal
link: https: / /blog.csdn.net/xiaokui_wingfly/article/details/51502209
