feat:新增加载动画
This commit is contained in:
Xwen
@@ -1,13 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>意社区</title>
|
||||
<link rel="stylesheet" href="/src/assets/loading.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="Loading">
|
||||
<div class="loader JS_on">
|
||||
<span class="binary"></span>
|
||||
<span class="binary"></span>
|
||||
<span class="getting-there">意社区很大，你要等一下...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -1,28 +1,29 @@
|
||||
<script setup>
|
||||
</script>
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<el-config-provider :locale="locale">
|
||||
<RouterView />
|
||||
</el-config-provider>
|
||||
<el-config-provider :locale="locale">
|
||||
<RouterView />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
<script setup>
|
||||
import useConfigStore from "@/stores/config";
|
||||
import { ElConfigProvider } from 'element-plus'
|
||||
import {onMounted } from "vue";
|
||||
import { ElConfigProvider } from "element-plus";
|
||||
import { onMounted } from "vue";
|
||||
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
const locale= zhCn;
|
||||
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
|
||||
const locale = zhCn;
|
||||
|
||||
const configStore = useConfigStore();
|
||||
|
||||
// 判断是否有loading有的话去掉
|
||||
const loading = document.getElementById("Loading");
|
||||
if (loading !== null) {
|
||||
document.body.removeChild(Loading);
|
||||
}
|
||||
|
||||
//加载全局信息
|
||||
onMounted(async()=>{
|
||||
|
||||
await configStore.getConfig();
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await configStore.getConfig();
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
128
Yi.Bbs.Vue3/src/assets/loading.css
Normal file
128
Yi.Bbs.Vue3/src/assets/loading.css
Normal file
@@ -0,0 +1,128 @@
|
||||
.loader {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
width: 130px;
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.loader::before,
|
||||
.loader::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: -50%;
|
||||
z-index: 1;
|
||||
border-left: 150px solid transparent;
|
||||
border-right: 150px solid transparent;
|
||||
border-bottom: 100px solid #1b2a33;
|
||||
}
|
||||
|
||||
.loader::after {
|
||||
border-right: 100px solid transparent;
|
||||
border-bottom: 100px solid #1f3039;
|
||||
}
|
||||
|
||||
.loader .getting-there {
|
||||
width: 200%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -50%;
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.loader .binary {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
display: block;
|
||||
color: #000;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 50px;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loader .binary::before,
|
||||
.loader .binary::after {
|
||||
font-family: "Lato";
|
||||
font-size: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.loader .binary:nth-child(1)::before {
|
||||
content: "0";
|
||||
animation: a 1.1s linear infinite;
|
||||
}
|
||||
|
||||
.loader .binary:nth-child(1)::after {
|
||||
content: "0";
|
||||
animation: b 1.3s linear infinite;
|
||||
}
|
||||
|
||||
.loader .binary:nth-child(2)::before {
|
||||
content: "1";
|
||||
animation: c 0.9s linear infinite;
|
||||
}
|
||||
|
||||
.loader .binary:nth-child(2)::after {
|
||||
content: "1";
|
||||
animation: d 0.7s linear infinite;
|
||||
}
|
||||
|
||||
.loader.JS_on::before,
|
||||
.loader.JS_on::after {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
@keyframes a {
|
||||
0% {
|
||||
transform: translate(30px, 0) rotate(30deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate(30px, 150px) rotate(-50deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes b {
|
||||
0% {
|
||||
transform: translate(50px, 0) rotate(-40deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate(40px, 150px) rotate(80deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes c {
|
||||
0% {
|
||||
transform: translate(70px, 0) rotate(10deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate(60px, 150px) rotate(70deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes d {
|
||||
0% {
|
||||
transform: translate(30px, 0) rotate(-50deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate(45px, 150px) rotate(30deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
136
Yi.Bbs.Vue3/src/assets/loading.scss
Normal file
136
Yi.Bbs.Vue3/src/assets/loading.scss
Normal file
@@ -0,0 +1,136 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 130px;
|
||||
height: 170px;
|
||||
position: relative;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: -50%;
|
||||
z-index: 1;
|
||||
border-left: 150px solid transparent;
|
||||
border-right: 150px solid transparent;
|
||||
border-bottom: 100px solid darken(#2d4654, 10%);
|
||||
// transform: scale(0);
|
||||
// transition: all 0.2s ease;
|
||||
}
|
||||
&::after {
|
||||
border-right: 100px solid transparent;
|
||||
border-bottom: 100px solid darken(#2d4654, 8%);
|
||||
}
|
||||
|
||||
.getting-there {
|
||||
width: 200%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -50%;
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.binary {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
display: block;
|
||||
color: #000;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 50px;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
font-family: "Lato";
|
||||
font-size: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
content: "0";
|
||||
animation: a 1.1s linear infinite;
|
||||
}
|
||||
&::after {
|
||||
content: "0";
|
||||
animation: b 1.3s linear infinite;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
content: "1";
|
||||
animation: c 0.9s linear infinite;
|
||||
}
|
||||
&::after {
|
||||
content: "1";
|
||||
animation: d 0.7s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ACTIVATE
|
||||
&.JS_on {
|
||||
&::before,
|
||||
&::after {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes a {
|
||||
0% {
|
||||
transform: translate(30px, 0) rotate(30deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate(30px, 150px) rotate(-50deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes b {
|
||||
0% {
|
||||
transform: translate(50px, 0) rotate(-40deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate(40px, 150px) rotate(80deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes c {
|
||||
0% {
|
||||
transform: translate(70px, 0) rotate(10deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate(60px, 150px) rotate(70deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes d {
|
||||
0% {
|
||||
transform: translate(30px, 0) rotate(-50deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate(45px, 150px) rotate(30deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user