xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:新增加载动画

Browse Source
This commit is contained in:
Xwen
2023-12-27 22:41:57 +08:00
parent f539ab39e7
commit 4867a0df2b
4 changed files with 292 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
Yi.Bbs.Vue3/src/App.vue
View File

@@ -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
View 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
View 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;
}
}