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; - width: 28px; - height: 28px; - border-radius: 50%; - border: solid 4px; -} - -#splashSpinner:before { - border-color: currentColor; - opacity: 0.3; -} - -#splashSpinner:after { +#splashSpinner > .spinner { position: absolute; top: 0; - border-color: currentColor transparent transparent transparent; + left: 0; + width: 28px; + height: 28px; + fill-rule: evenodd; + clip-rule: evenodd; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 1.5; +} +#splashSpinner > .spinner.bg { + opacity: 0.275; +} +#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 diff --git a/packages/client/src/components/global/loading.vue b/packages/client/src/components/global/loading.vue index 43ea1395ed..933c5e5881 100644 --- a/packages/client/src/components/global/loading.vue +++ b/packages/client/src/components/global/loading.vue @@ -1,6 +1,17 @@ <template> <div class="yxspomdl" :class="{ inline, colored, mini }"> - <div class="ring"></div> + <div class="container"> + <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> + </div> </div> </template> @@ -19,7 +30,7 @@ const props = withDefaults(defineProps<{ </script> <style lang="scss" scoped> -@keyframes ring { +@keyframes spinner { 0% { transform: rotate(0deg); } @@ -33,7 +44,7 @@ const props = withDefaults(defineProps<{ text-align: center; cursor: wait; - --size: 48px; + --size: 40px; &.colored { color: var(--accent); @@ -50,32 +61,31 @@ const props = withDefaults(defineProps<{ --size: 32px; } - > .ring { + > .container { position: relative; - display: inline-block; - vertical-align: middle; + width: var(--size); + height: var(--size); + margin: 0 auto; - &:before, - &:after { - content: " "; - display: block; - box-sizing: border-box; - width: var(--size); - height: var(--size); - border-radius: 50%; - border: solid 4px; - } - - &:before { - border-color: currentColor; - opacity: 0.3; - } - - &:after { + > .spinner { position: absolute; top: 0; - border-color: currentColor transparent transparent transparent; - animation: ring 0.5s linear infinite; + left: 0; + width: var(--size); + height: var(--size); + fill-rule: evenodd; + clip-rule: evenodd; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 1.5; + } + + > .bg { + opacity: 0.275; + } + + > .fg { + animation: spinner 0.5s linear infinite; } } }