# Crie uma nova pasta css na pasta estática e, em seguida, crie um arquivo loading.css na pasta 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;
}
}
# Referencie o arquivo loading.css na página index.html
<link rel="stylesheet" type="text/css" href="static/css/loading.css">
# Insira uma div no corpo da página index.html
<div>Id = "loading"- Estilo:
- style = “margin: 0 auto;” // div é centralizado horizontalmente
- style = "tamanho da fonte: 18 px;" // tamanho da fonte 18 px
- style = "text-align: center;" // O texto está centralizado horizontalmente
<div id="loading"><div id="app">O objetivo de colocá-lo na frente é dar prioridade à espera pelo carregamento da animação
<!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
Adicionar no App.vue
created() {
let loading = document.getElementById("loading");
if (loading !== null) {
document.body.removeChild(loading);
}
}
- Obtenha o DOM com id = "loading" e, se puder ser obtido, remova-o do corpo.
- Carregar aqui significa que a página inicial foi inicializada, para que você possa remover a animação em espera
Código completo do 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>
A animação css é reproduzida em: https://www.jianshu.com/p/9b2a71fa25e5 , existem outros códigos css de animação
Leitura relacionada:
30 efeitos legais de animação de pré-carregamento de página CSS3 (recomendado): http://www.ibloger.net/article/1558.html
Loaders.css Vários efeitos de animação de progresso de carregamento CSS puro: http: //www.ibloger. net / article / 1568.html
load-awesome 53 animação de indicador de carregamento de página de pré-carregamento CSS3 puro efeitos especiais: http://www.ibloger.net/article/1800.html
CSS3-Preloaders 6 pré-carregamento de CSS3 animação de indicador de carregamento Efeitos especiais: http://www.ibloger.net/article/1556.html Os
efeitos especiais dos botões são baseados no carregamento de SVG e Segment.js: http://www.ibloger.net/article/1554.html
Link original: https: / /blog.csdn.net/xiaokui_wingfly/article/details/51502209
