notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend] Improve loading screen

Browse source
This commit is contained in:
Laura Hausmann 2024-04-17 22:20:39 +02:00 • committed by Lilian
parent 3fecb0f198
commit d4b75d13bd
No known key found for this signature in database
GPG key ID: 007CA12D692829E1
2 changed files with 98 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Iceshrimp.Backend/Pages/Shared/FrontendSPA.cshtml
View file

@ -17,7 +17,6 @@
<meta name="commit" content="@Config.Value.CommitHash"/>
<title>Iceshrimp.Frontend</title>
<base href="/"/>
<link rel="stylesheet" href="~/css/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="~/css/app.css"/>
<link rel="stylesheet" href="~/_content/Iceshrimp.Assets.PhosphorIcons/css/ph-regular.css"/>
<link rel="icon" type="image/png" href="~/favicon.png"/>
@ -26,11 +25,15 @@
<body>
<div id="app">
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%"/>
<circle r="40%" cx="50%" cy="50%"/>
</svg>
<div class="loading-progress-text"></div>
<div class="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
@* We need text on screen so chrome actually renders the loading animation *@
&nbsp;
</div>
<div id="blazor-error-ui">
@ -38,6 +41,7 @@
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="~/_framework/blazor.webassembly.js"></script>
</body>

112
Iceshrimp.Frontend/wwwroot/css/app.css
View file

@ -21,7 +21,6 @@
}
/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
@ -61,6 +60,7 @@ textarea, select {
li {
list-style-type: none;
}
menu {
margin: 0;
padding: 0;
@ -79,8 +79,6 @@ button {
background-color: var(--foreground-color);
color: var(--notice-color);
padding: 0.2em;
}
}
/*Blazor stuff, Fix Later*/
@ -89,10 +87,10 @@ button {
}
#blazor-error-ui {
display: none;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
@ -117,37 +115,99 @@ button {
content: "An error has occurred."
}
.loading-progress {
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem auto;
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.loading-progress circle {
fill: none;
stroke: #e0e0e0;
stroke-width: 0.6rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.loading-progress circle:last-child {
stroke: #1b6ec2;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
.lds-ellipsis,
.lds-ellipsis div {
box-sizing: border-box;
}
.loading-progress-text {
.lds-ellipsis {
position: fixed;
width: 80px;
height: 80px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.lds-ellipsis div {
position: absolute;
text-align: center;
font-weight: bold;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
top: 33.33333px;
width: 13.33333px;
height: 13.33333px;
border-radius: 50%;
background: currentColor;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loading-progress-text:after {
content: var(--blazor-load-percentage-text, "Loading");
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
.page {
animation: fadein 150ms ease-in;
}
code {