# Cree una nueva carpeta css debajo de la carpeta estática y luego cree un archivo loading.css debajo de la carpeta 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;
}
}
# Consulte el archivo loading.css en la página index.html
<link rel="stylesheet" type="text/css" href="static/css/loading.css">
# Inserte un div en el cuerpo de la página index.html
<div>的 id = "cargando"- Estilo:
- style = "margin: 0 auto;" // div está centrado horizontalmente
- style = "font-size: 18px;" // tamaño de fuente 18px
- style = "text-align: center;" // El texto está centrado horizontalmente
<div id="loading"><div id="app">El propósito de ponerlo al frente es dar prioridad a esperar la carga de la animación.
<!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
Agregar en App.vue
created() {
let loading = document.getElementById("loading");
if (loading !== null) {
document.body.removeChild(loading);
}
}
- Obtenga el DOM con id = "cargando", y si puede obtenerlo, retírelo del cuerpo.
- Cargando aquí significa que la página de inicio se ha inicializado, por lo que puede eliminar la animación en espera
Código completo de 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>
La animación CSS se reproduce desde: https://www.jianshu.com/p/9b2a71fa25e5 , hay otros códigos CSS de animación
Lectura relacionada:
30 efectos de animación de precarga de página genial de CSS3 (recomendado): http://www.ibloger.net/article/1558.html
Loaders.css Varios efectos de animación de progreso de carga de CSS puro: http: //www.ibloger. net / article / 1568.html
load-awesome 53 efectos de animación de indicador de carga de página de carga previa CSS3 puro efectos especiales: http://www.ibloger.net/article/1800.html
CSS3-Preloaders 6 CSS3 animación de indicador de carga de carga previa Efectos especiales: http://www.ibloger.net/article/1556.html Los
efectos especiales de los botones se basan en la carga de SVG y Segment.js: http://www.ibloger.net/article/1554.html
Enlace original: https: / /blog.csdn.net/xiaokui_wingfly/article/details/51502209
