# 在 static 文件夹下新建 css 文件夹,再在css文件夹下新建 loading.css 文件
.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;
}
}
# 在 index.html 页面的 中引用 loading.css 文件
<link rel="stylesheet" type="text/css" href="static/css/loading.css">
# 在 index.html 页面的 body 插入一个 div
<div>
的 id = " loading "- 样式:
- style=“margin: 0 auto;” // div 水平居中
- style="font-size: 18px; " // 字体大小 18px
- style=" text-align: center;" // 文字水平居中
<div id="loading">
放在<div id="app">
前面的目的是为优先显示等待加载动画
<!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.vue
在 App.vue中添加
created() {
let loading = document.getElementById("loading");
if (loading !== null) {
document.body.removeChild(loading);
}
}
- 拿到 id= “loading” 的 DOM ,如果能获取得到,把它从 body 中移除。
- 加载到这里说明首页已经初始化完成了,所以就可以把等待加载动画移除掉了
App.vue 完整代码:
<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>
css动画转载自:https://www.jianshu.com/p/9b2a71fa25e5,还有其它动画 css 代码
相关阅读:
30种CSS3炫酷页面预加载loading动画特效(推荐):http://www.ibloger.net/article/1558.html
Loaders.css 多种纯CSS加载进度动画效果:http://www.ibloger.net/article/1568.html
load-awesome 53种纯CSS3预加载页面loading指示器动画特效:http://www.ibloger.net/article/1800.html
CSS3-Preloaders 6种CSS3预加载Loading指示器动画特效:http://www.ibloger.net/article/1556.html
按钮特效 基于SVG和Segment.js的Loading加载:http://www.ibloger.net/article/1554.html
原文链接:https://blog.csdn.net/xiaokui_wingfly/article/details/51502209