＃静的フォルダーの下に新しい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ページの本文にdivを挿入します
<div>的id = "読み込み中"- スタイル：
- 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.view
App.vueに追加
created() {
let loading = document.getElementById("loading");
if (loading !== null) {
document.body.removeChild(loading);
}
}
- id = "loading"のDOMを取得し、取得できる場合は、本文から削除します。
- ここにロードすると、ホームページが初期化されたので、待機中のアニメーションを削除できます
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コードがあります。
関連読書：
クールCSS3ページのプリロードされた負荷のアニメーション効果（推奨）の30種類：http://www.ibloger.net/article/1558.html
Loaders.cssより純粋なCSSアニメーションのロードの進行状況：HTTP：//www.ibloger。 net / article / 1568.html
load-awesome 53純粋なCSS3プリロードページ読み込みインジケーターアニメーションの特殊効果：http : //www.ibloger.net/article/1800.html
CSS3-Preloaders 6 CSS3プリロード読み込みインジケーターアニメーション特殊効果：http : //www.ibloger.net/article/1556.html
ボタンの特殊効果は、SVGとSegment.jsの読み込みに基づいています：http : //www.ibloger.net/article/1554.html元の
リンク：https：/ /blog.csdn.net/xiaokui_wingfly/article/details/51502209
