feat:新增加载动画
This commit is contained in:
Xwen
@@ -1,13 +1,20 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
<title>意社区</title>
|
<title>意社区</title>
|
||||||
|
<link rel="stylesheet" href="/src/assets/loading.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -1,28 +1,29 @@
|
|||||||
<script setup>
|
<script setup></script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-config-provider :locale="locale">
|
<el-config-provider :locale="locale">
|
||||||
<RouterView />
|
<RouterView />
|
||||||
</el-config-provider>
|
</el-config-provider>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import useConfigStore from "@/stores/config";
|
import useConfigStore from "@/stores/config";
|
||||||
import { ElConfigProvider } from 'element-plus'
|
import { ElConfigProvider } from "element-plus";
|
||||||
import {onMounted } from "vue";
|
import { onMounted } from "vue";
|
||||||
|
|
||||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
|
||||||
const locale= zhCn;
|
const locale = zhCn;
|
||||||
|
|
||||||
const configStore = useConfigStore();
|
const configStore = useConfigStore();
|
||||||
|
|
||||||
|
// 判断是否有loading有的话去掉
|
||||||
|
const loading = document.getElementById("Loading");
|
||||||
|
if (loading !== null) {
|
||||||
|
document.body.removeChild(Loading);
|
||||||
|
}
|
||||||
|
|
||||||
//加载全局信息
|
//加载全局信息
|
||||||
onMounted(async()=>{
|
onMounted(async () => {
|
||||||
|
await configStore.getConfig();
|
||||||
await configStore.getConfig();
|
});
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped></style>
|
||||||
|
|
||||||
</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