diff options
Diffstat (limited to 'packages/backend/src/server/web')
| -rw-r--r-- | packages/backend/src/server/web/style.css | 47 | ||||
| -rw-r--r-- | packages/backend/src/server/web/views/base.pug | 3 |
2 files changed, 48 insertions, 2 deletions
diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css index 43fbe1ab06..9c4cd4b9bf 100644 --- a/packages/backend/src/server/web/style.css +++ b/packages/backend/src/server/web/style.css @@ -16,7 +16,7 @@ html { transition: opacity 0.5s ease; } -#splash > img { +#splashIcon { position: absolute; top: 0; right: 0; @@ -27,3 +27,48 @@ html { height: 64px; 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); + } +} diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug index abacb1ccfc..1513208310 100644 --- a/packages/backend/src/server/web/views/base.pug +++ b/packages/backend/src/server/web/views/base.pug @@ -59,5 +59,6 @@ html br | Please turn on your JavaScript div#splash - img(src= icon || '/static-assets/splash.png') + img#splashIcon(src= icon || '/static-assets/splash.png') + div#splashSpinner block content |