enhance(client): show loading icon on splash screen

Close #8481
This commit is contained in:
syuilo 2022-04-11 23:11:11 +09:00
parent a7015e6f09
commit 08ff4926c7
3 changed files with 49 additions and 2 deletions

View file

@ -14,6 +14,7 @@ You should also include the user name that made the change.
### Improvements ### Improvements
- Improve webhook @syuilo - Improve webhook @syuilo
- Client: Show loading icon on splash screen @syuilo
### Bugfixes ### Bugfixes
- API: parameter validation of users/show was wrong - API: parameter validation of users/show was wrong

View file

@ -16,7 +16,7 @@ html {
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
} }
#splash > img { #splashIcon {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -27,3 +27,48 @@ html {
height: 64px; height: 64px;
pointer-events: none; pointer-events: none;
} }
#splashSpinner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: inline-block;
width: 28px;
height: 28px;
transform: translateY(70px);
}
#splashSpinner:before,
#splashSpinner:after {
content: " ";
display: block;
box-sizing: border-box;
width: 28px;
height: 28px;
border-radius: 50%;
border: solid 4px;
}
#splashSpinner:before {
border-color: currentColor;
opacity: 0.3;
}
#splashSpinner:after {
position: absolute;
top: 0;
border-color: currentColor transparent transparent transparent;
animation: splashSpinner 0.5s linear infinite;
}
@keyframes splashSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

View file

@ -59,5 +59,6 @@ html
br br
| Please turn on your JavaScript | Please turn on your JavaScript
div#splash div#splash
img(src= icon || '/static-assets/splash.png') img#splashIcon(src= icon || '/static-assets/splash.png')
div#splashSpinner
block content block content