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:
parent
74d6edff77
commit
f02ea2c472
7 changed files with 105 additions and 101 deletions
packages
backend/src/server/web
frontend-embed/src/components
frontend/src
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Add table
Reference in a new issue