diff --git a/Iceshrimp.Backend/Pages/Shared/FrontendSPA.cshtml b/Iceshrimp.Backend/Pages/Shared/FrontendSPA.cshtml index 8c906345..f7cf2c66 100644 --- a/Iceshrimp.Backend/Pages/Shared/FrontendSPA.cshtml +++ b/Iceshrimp.Backend/Pages/Shared/FrontendSPA.cshtml @@ -17,7 +17,6 @@ Iceshrimp.Frontend - @@ -26,11 +25,15 @@
- - - - -
+
+
+
+
+
+
+ + @* We need text on screen so chrome actually renders the loading animation *@ +  
@@ -38,6 +41,7 @@ Reload 🗙
+ diff --git a/Iceshrimp.Frontend/wwwroot/css/app.css b/Iceshrimp.Frontend/wwwroot/css/app.css index 9f3cf1e0..4f2f66cb 100644 --- a/Iceshrimp.Frontend/wwwroot/css/app.css +++ b/Iceshrimp.Frontend/wwwroot/css/app.css @@ -11,7 +11,7 @@ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - + --background-color: #3b364c; --foreground-color: #423c55; --highlight-color: #544d77; @@ -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,39 +115,101 @@ 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 { color: #c02d76; -} \ No newline at end of file +}