yume/paricafe
1
0
Fork 0
mirror of https://github.com/paricafe/misskey.git synced 2025-01-18 12:38:41 -06:00
Code Issues Projects Releases Packages Wiki Activity

Tweak loading style

Browse source
This commit is contained in:
fly_mc 2024-10-13 12:18:57 +08:00
parent 74d6edff77
commit f02ea2c472
7 changed files with 105 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
packages/backend/src/server/web/style.css
View file

@ -32,6 +32,7 @@ html {
width: 64px;
height: 64px;
pointer-events: none;
border-radius: 22px;
}
#splashSpinner {
@ -44,7 +45,7 @@ html {
display: inline-block;
width: 28px;
height: 28px;
transform: translateY(70px);
transform: translateY(80px);
color: var(--MI_THEME-accent);
}
@ -54,17 +55,12 @@ html {
left: 0;
width: 28px;
height: 28px;
fill-rule: evenodd;
clip-rule: evenodd;
animation: splashSpinner 2s linear infinite;
}
#splashSpinner > .spinner > .path {
stroke: var(--accent);
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;
animation: dash 1.2s ease-in-out infinite;
}
@keyframes splashSpinner {
@ -75,3 +71,18 @@ html {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}

30
packages/backend/src/server/web/style.embed.css
View file

@ -76,17 +76,12 @@ html.embed.noborder #splash {
left: 0;
width: 28px;
height: 28px;
fill-rule: evenodd;
clip-rule: evenodd;
animation: splashSpinner 2s linear infinite;
}
#splashSpinner > .spinner > .path {
stroke: var(--MI_THEME-accent);
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;
animation: dash 1.2s ease-in-out infinite;
}
@keyframes splashSpinner {
@ -97,3 +92,18 @@ html.embed.noborder #splash {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}

11
packages/backend/src/server/web/views/base-embed.pug
View file

@ -59,14 +59,7 @@ html(class='embed')
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 class="spinner" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6px" style="fill: none; stroke: currentColor; stroke-width: 6px;"></circle>
</svg>
block content

11
packages/backend/src/server/web/views/base.pug
View file

@ -84,14 +84,7 @@ 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 class="spinner" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6px" style="fill: none; stroke: currentColor; stroke-width: 6px;"></circle>
</svg>
block content

33
packages/frontend-embed/src/components/EmLoading.vue
View file

@ -6,15 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini, [$style.em]: em }]">
<div :class="$style.container">
<svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.125,0,0,1.125,12,12)">
<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
</g>
</svg>
<svg :class="[$style.spinner, $style.fg, { [$style.static]: static }]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.125,0,0,1.125,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:21.33px;"/>
</g>
<svg :class="[$style.spinner]" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle :class="[$style.path]" cx="25" cy="25" r="20" fill="none" stroke-width="6px" style="fill: none; stroke: currentColor; stroke-width: 6px;"></circle>
</svg>
</div>
</div>
@ -91,22 +84,12 @@ const props = withDefaults(defineProps<{
left: 0;
width: var(--size);
height: var(--size);
fill-rule: evenodd;
clip-rule: evenodd;
animation: spinner 2s linear infinite;
}
.path {
stroke: var(--MI_THEME-accent);
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 1.5;
}
.bg {
opacity: 0.275;
}
.fg {
animation: spinner 0.5s linear infinite;
&.static {
animation-play-state: paused;
}
animation: dash 1.2s ease-in-out infinite;
}
</style>

48
packages/frontend/src/components/global/MkLoading.vue
View file

@ -6,15 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini, [$style.em]: em }]">
<div :class="$style.container">
<svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.125,0,0,1.125,12,12)">
<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
</g>
</svg>
<svg :class="[$style.spinner, $style.fg, { [$style.static]: static }]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.125,0,0,1.125,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:21.33px;"/>
</g>
<svg :class="[$style.spinner]" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle :class="[$style.path]" cx="25" cy="25" r="20" fill="none" stroke-width="6px" style="fill: none; stroke: currentColor; stroke-width: 6px;"></circle>
</svg>
</div>
</div>
@ -48,6 +41,21 @@ const props = withDefaults(defineProps<{
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
.root {
padding: 32px;
text-align: center;
@ -91,22 +99,12 @@ const props = withDefaults(defineProps<{
left: 0;
width: var(--size);
height: var(--size);
fill-rule: evenodd;
clip-rule: evenodd;
animation: spinner 2s linear infinite;
}
.path {
stroke: var(--MI_THEME-accent);
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 1.5;
}
.bg {
opacity: 0.275;
}
.fg {
animation: spinner 0.5s linear infinite;
&.static {
animation-play-state: paused;
}
animation: dash 1.2s ease-in-out infinite;
}
</style>

40
packages/frontend/src/ui/_common_/common.vue
View file

@ -219,6 +219,21 @@ if ($i) {
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
#wait {
display: block;
position: fixed;
@ -227,18 +242,19 @@ if ($i) {
right: 15px;
pointer-events: none;
&::before {
content: "";
display: block;
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: var(--MI_THEME-accent);
border-left-color: var(--MI_THEME-accent);
border-radius: 50%;
animation: progress-spinner 400ms linear infinite;
}
> svg {
display: block;
width: 18px;
height: 18px;
box-sizing: border-box;
animation: progress-spinner 2s linear infinite;
}
> svg > circle {
stroke: var(--MI_THEME-accent);
stroke-linecap: round;
animation: dash 1.2s ease-in-out infinite;
}
}
#botWarn {