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;
}
.fantastic-admin-home .loading {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
color: inherit;
vertical-align: middle;
pointer-events: none;
transform: scale(3);
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.fantastic-admin-home .loading::before,
.fantastic-admin-home .loading::after {
.fantastic-admin-home .square {
display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
}
.fantastic-admin-home .square::before {
content: '';
display: block;
position: absolute;
background-color: currentColor;
left: 50%;
right: 0;
top: 0;
bottom: 50%;
box-shadow: -0.5em 0 0 currentColor;
animation: loading 1s linear infinite;
width: 10px;
height: 10px;
border-radius: 15%;
border: 3px solid #8c858f;
}
.fantastic-admin-home .loading::after {
top: 50%;
bottom: 0;
animation-delay: 0.25s;
.fantastic-admin-home .loading.animate .square::before {
animation: square-to-dot-animation 1.2s linear;
}
@keyframes loading {
0%,
100% {
box-shadow: -0.5em 0 0 transparent;
background-color: currentColor;
.fantastic-admin-home .loading.animate .square:nth-child(1)::before {
animation-delay: calc(100ms * 1);
}
.fantastic-admin-home .loading.animate .square:nth-child(2)::before {
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% {
box-shadow: -0.5em 0 0 currentColor;
background-color: transparent;
70% {
border-radius: 15%;
width: 10px;
height: 10px;
margin: initial;
border-width: 3px;
}
}
.fantastic-admin-home .text {
font-size: 24px;
margin-top: 50px;
margin-top: 20px;
}
</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>
<body>
<div id="app">
<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>
<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>
<script type="module" src="/src/main.js"></script>
<% if (debugTool == 'eruda') { %>