diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-05-19 15:24:35 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-05-19 15:24:35 +0900 |
| commit | 4fc20587450bdba07c86bed2a5f68718ef5bf1f2 (patch) | |
| tree | 6dcf175f8a1f0acdb86259566a46b3c45a696f9a /packages/backend/src/server | |
| parent | Update CONTRIBUTING.md (diff) | |
| download | sharkey-4fc20587450bdba07c86bed2a5f68718ef5bf1f2.tar.gz sharkey-4fc20587450bdba07c86bed2a5f68718ef5bf1f2.tar.bz2 sharkey-4fc20587450bdba07c86bed2a5f68718ef5bf1f2.zip | |
chore(client): tweak loading spinner design
Diffstat (limited to 'packages/backend/src/server')
| -rw-r--r-- | packages/backend/src/server/web/style.css | 30 | ||||
| -rw-r--r-- | packages/backend/src/server/web/views/base.pug | 10 |
2 files changed, 23 insertions, 17 deletions
diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css index 9c4cd4b9bf..d59f00fe16 100644 --- a/packages/backend/src/server/web/style.css +++ b/packages/backend/src/server/web/style.css @@ -39,28 +39,24 @@ html { width: 28px; height: 28px; transform: translateY(70px); + color: var(--accent); } - -#splashSpinner:before, -#splashSpinner:after { - content: " "; - display: block; - box-sizing: border-box; +#splashSpinner > .spinner { + position: absolute; + top: 0; + left: 0; width: 28px; height: 28px; - border-radius: 50%; - border: solid 4px; + fill-rule: evenodd; + clip-rule: evenodd; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 1.5; } - -#splashSpinner:before { - border-color: currentColor; - opacity: 0.3; +#splashSpinner > .spinner.bg { + opacity: 0.275; } - -#splashSpinner:after { - position: absolute; - top: 0; - border-color: currentColor transparent transparent transparent; +#splashSpinner > .spinner.fg { animation: splashSpinner 0.5s linear infinite; } diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug index d79354d118..a488e51171 100644 --- a/packages/backend/src/server/web/views/base.pug +++ b/packages/backend/src/server/web/views/base.pug @@ -65,4 +65,14 @@ html div#splash img#splashIcon(src= icon || '/static-assets/splash.png') div#splashSpinner + <svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg"> + <g transform="matrix(1,0,0,1,12,12)"> + <circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/> + </g> + </svg> + <svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg"> + <g transform="matrix(1,0,0,1,12,12)"> + <path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/> + </g> + </svg> block content |