mirror of
https://github.com/iLay1678/i-tools.git
synced 2025-07-05 19:49:00 +08:00
添加loading动画
This commit is contained in:
parent
a415b06f16
commit
7abd79dde8
@ -18,4 +18,56 @@
|
|||||||
|
|
||||||
.h-\[52px\] {
|
.h-\[52px\] {
|
||||||
height: 52px;
|
height: 52px;
|
||||||
|
}
|
||||||
|
.loading-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f8fafc;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wave {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-end;
|
||||||
|
height: 40px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wave > div {
|
||||||
|
width: 8px;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(45deg, #60a5fa, #3b82f6);
|
||||||
|
border-radius: 4px;
|
||||||
|
animation: wave 1s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wave > div:nth-child(2) { animation-delay: 0.1s; }
|
||||||
|
.loading-wave > div:nth-child(3) { animation-delay: 0.2s; }
|
||||||
|
.loading-wave > div:nth-child(4) { animation-delay: 0.3s; }
|
||||||
|
.loading-wave > div:nth-child(5) { animation-delay: 0.4s; }
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
color: #3b82f6;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wave {
|
||||||
|
0%, 100% { transform: scaleY(0.5); }
|
||||||
|
50% { transform: scaleY(1); }
|
||||||
}
|
}
|
@ -1,4 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div v-if="loading" class="loading-overlay">
|
||||||
|
<div class="loading-container">
|
||||||
|
<div class="loading-wave">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<div class="loading-text">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<a-layout class="layout">
|
<a-layout class="layout">
|
||||||
<a-layout-header class="header">
|
<a-layout-header class="header">
|
||||||
<div class="header-content max-w-3xl mx-auto px-4 flex items-center">
|
<div class="header-content max-w-3xl mx-auto px-4 flex items-center">
|
||||||
@ -27,6 +39,15 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { GithubOutlined } from '@ant-design/icons-vue'
|
import { GithubOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
|
||||||
|
const loading = ref(true)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false
|
||||||
|
}, 300)
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
@ -27,3 +27,6 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user