1
0
Fork 0
mirror of https://github.com/paricafe/misskey.git synced 2025-02-27 19:04:25 -06:00

Tweak loading style

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
packages
backend/src/server/web
frontend-embed/src/components
frontend/src
components/global
ui/_common_

View file

@ -32,6 +32,7 @@ html {
width: 64px; width: 64px;
height: 64px; height: 64px;
pointer-events: none; pointer-events: none;
border-radius: 22px;
} }
#splashSpinner { #splashSpinner {
@ -44,7 +45,7 @@ html {
display: inline-block; display: inline-block;
width: 28px; width: 28px;
height: 28px; height: 28px;
transform: translateY(70px); transform: translateY(80px);
color: var(--MI_THEME-accent); color: var(--MI_THEME-accent);
} }
@ -54,17 +55,12 @@ html {
left: 0; left: 0;
width: 28px; width: 28px;
height: 28px; height: 28px;
fill-rule: evenodd; animation: splashSpinner 2s linear infinite;
clip-rule: evenodd; }
#splashSpinner > .spinner > .path {
stroke: var(--accent);
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; animation: dash 1.2s ease-in-out infinite;
stroke-miterlimit: 1.5;
}
#splashSpinner > .spinner.bg {
opacity: 0.275;
}
#splashSpinner > .spinner.fg {
animation: splashSpinner 0.5s linear infinite;
} }
@keyframes splashSpinner { @keyframes splashSpinner {
@ -75,3 +71,18 @@ html {
transform: rotate(360deg); 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;
}
}

View file

@ -76,17 +76,12 @@ html.embed.noborder #splash {
left: 0; left: 0;
width: 28px; width: 28px;
height: 28px; height: 28px;
fill-rule: evenodd; animation: splashSpinner 2s linear infinite;
clip-rule: evenodd; }
#splashSpinner > .spinner > .path {
stroke: var(--MI_THEME-accent);
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; animation: dash 1.2s ease-in-out infinite;
stroke-miterlimit: 1.5;
}
#splashSpinner > .spinner.bg {
opacity: 0.275;
}
#splashSpinner > .spinner.fg {
animation: splashSpinner 0.5s linear infinite;
} }
@keyframes splashSpinner { @keyframes splashSpinner {
@ -97,3 +92,18 @@ html.embed.noborder #splash {
transform: rotate(360deg); 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;
}
}

View file

@ -59,14 +59,7 @@ html(class='embed')
div#splash div#splash
img#splashIcon(src= icon || '/static-assets/splash.png') img#splashIcon(src= icon || '/static-assets/splash.png')
div#splashSpinner div#splashSpinner
<svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg"> <svg class="spinner" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1,0,0,1,12,12)"> <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6px" style="fill: none; stroke: currentColor; stroke-width: 6px;"></circle>
<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> </svg>
block content block content

View file

@ -84,14 +84,7 @@ html
div#splash div#splash
img#splashIcon(src= icon || '/static-assets/splash.png') img#splashIcon(src= icon || '/static-assets/splash.png')
div#splashSpinner div#splashSpinner
<svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg"> <svg class="spinner" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1,0,0,1,12,12)"> <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6px" style="fill: none; stroke: currentColor; stroke-width: 6px;"></circle>
<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> </svg>
block content block content

View file

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

View file

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

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 { #wait {
display: block; display: block;
position: fixed; position: fixed;
@ -227,18 +242,19 @@ if ($i) {
right: 15px; right: 15px;
pointer-events: none; pointer-events: none;
&::before { > svg {
content: ""; display: block;
display: block; width: 18px;
width: 18px; height: 18px;
height: 18px; box-sizing: border-box;
box-sizing: border-box; animation: progress-spinner 2s linear infinite;
border: solid 2px transparent; }
border-top-color: var(--MI_THEME-accent);
border-left-color: var(--MI_THEME-accent); > svg > circle {
border-radius: 50%; stroke: var(--MI_THEME-accent);
animation: progress-spinner 400ms linear infinite; stroke-linecap: round;
} animation: dash 1.2s ease-in-out infinite;
}
} }
#botWarn { #botWarn {