enhance(frontend): スピナーのデザインを変更
This commit is contained in:
NoriDev
parent
b2cadbdd84
commit
dc6c504016
|
|
@ -50,6 +50,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
|
|||
- Enhance: 그룹 대화에서 읽음 표시를 개선
|
||||
- Enhance: cli, bios 페이지 개선
|
||||
- Enhance: 서버와 연결이 끊겼을 때 stream indicator가 즉시 표시되지 않도록 (MisskeyIO/misskey#172)
|
||||
- Enhance: 스피너 디자인 변경
|
||||
- Fix: (Friendly) 길게 누르면 표시되는 계정 관리 다이얼로그의 UI 관련 오류 수정
|
||||
- Fix: 서브 노트 기능 오류
|
||||
- 서브 노트에서 더 보기 버튼을 사용할 수 없음
|
||||
|
|
|
|||
|
|
@ -54,17 +54,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 +70,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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,14 +80,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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -39,6 +32,8 @@ const props = withDefaults(defineProps<{
|
|||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
/* Credit to https://codepen.io/supah/pen/BjYLdW */
|
||||
|
||||
@keyframes spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
|
@ -48,12 +43,27 @@ 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;
|
||||
cursor: wait;
|
||||
|
||||
--size: 38px;
|
||||
--size: 40px;
|
||||
|
||||
&.colored {
|
||||
color: var(--accent);
|
||||
|
|
@ -91,22 +101,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(--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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue