test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-11-29 18:48:31 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

替换载入动画

Browse Source
This commit is contained in:
hooray 2021-08-28 14:16:17 +08:00
parent 7675d428b1
commit 89f33e8e55
1 changed files with 65 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
index.html
View File

@ -25,75 +25,88 @@
background-color: snow; background-color: snow;
} }
.fantastic-admin-home .loading { .fantastic-admin-home .loading {
position: relative; height: 40px;
display: inline-block; width: 40px;
width: 1em; display: flex;
height: 1em; align-items: center;
color: inherit; justify-content: center;
vertical-align: middle; flex-wrap: wrap;
pointer-events: none;
transform: scale(3);
} }
.fantastic-admin-home .loading::before, .fantastic-admin-home .square {
.fantastic-admin-home .loading::after { display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
}
.fantastic-admin-home .square::before {
content: ''; content: '';
display: block; width: 10px;
position: absolute; height: 10px;
background-color: currentColor; border-radius: 15%;
left: 50%; border: 3px solid #8c858f;
right: 0;
top: 0;
bottom: 50%;
box-shadow: -0.5em 0 0 currentColor;
animation: loading 1s linear infinite;
} }
.fantastic-admin-home .loading::after { .fantastic-admin-home .loading.animate .square::before {
top: 50%; animation: square-to-dot-animation 1.2s linear;
bottom: 0;
animation-delay: 0.25s;
} }
@keyframes loading { .fantastic-admin-home .loading.animate .square:nth-child(1)::before {
0%, animation-delay: calc(100ms * 1);
100% { }
box-shadow: -0.5em 0 0 transparent; .fantastic-admin-home .loading.animate .square:nth-child(2)::before {
background-color: currentColor; animation-delay: calc(100ms * 2);
}
.fantastic-admin-home .loading.animate .square:nth-child(3)::before {
animation-delay: calc(100ms * 3);
}
.fantastic-admin-home .loading.animate .square:nth-child(4)::before {
animation-delay: calc(100ms * 4);
}
@keyframes square-to-dot-animation {
15%,
55% {
border-radius: 100%;
width: 0;
height: 0;
margin: 5px;
border-width: 5px;
} }
50% { 70% {
box-shadow: -0.5em 0 0 currentColor; border-radius: 15%;
background-color: transparent; width: 10px;
height: 10px;
margin: initial;
border-width: 3px;
} }
} }
.fantastic-admin-home .text { .fantastic-admin-home .text {
font-size: 24px; font-size: 24px;
margin-top: 50px; margin-top: 20px;
} }
</style> </style>
<% if (appMode == 'example') { %>
<script>
var _hmt = _hmt || [];
(function() {
if (location.origin.includes('gitee')) {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?ba0ee7b31f404b7dc10bfcd8bdc7183d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
}
if (location.origin.includes('github')) {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d07a64f7a02cd5e9c01e1b36948ac4a5";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
}
})();
</script>
<% } %>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div class="fantastic-admin-home"> <div class="fantastic-admin-home">
<div class="loading"></div> <div class="loading">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="text"><%= title %>载入中…</div> <div class="text"><%= title %>载入中…</div>
</div> </div>
<script>
const Loading = document.querySelector('.loading')
Loading.classList.add('animate')
Loading.addEventListener('animationend', function() {
setTimeout(function() {
Loading.classList.remove('animate')
}, 600)
setTimeout(function() {
Loading.classList.add('animate')
}, 1000)
})
</script>
</div> </div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
<% if (debugTool == 'eruda') { %> <% if (debugTool == 'eruda') { %>