From 86996d956328de2f1d60b4dfddc363691df64193 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 7 May 2025 13:41:51 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/global/MkSystemIcon.vue | 71 +++++++++++++------
packages/frontend/src/pages/debug.vue | 10 +--
2 files changed, 54 insertions(+), 27 deletions(-)
diff --git a/packages/frontend/src/components/global/MkSystemIcon.vue b/packages/frontend/src/components/global/MkSystemIcon.vue
index 3285d5a940..66592da9c8 100644
--- a/packages/frontend/src/components/global/MkSystemIcon.vue
+++ b/packages/frontend/src/components/global/MkSystemIcon.vue
@@ -5,28 +5,28 @@ SPDX-License-Identifier: AGPL-3.0-only
@@ -68,26 +68,40 @@ const props = defineProps<{
fill: none;
stroke: currentColor;
stroke-width: 8px;
+ shape-rendering: geometricPrecision;
}
-.fill {
- fill: currentColor;
-}
-
-.anim {
+.animLine {
stroke-dasharray: var(--l);
stroke-dashoffset: var(--l);
- animation: line-animation var(--duration, 0.5s) cubic-bezier(0,0,.25,1) 1 forwards;
+ animation: line var(--duration, 0.5s) cubic-bezier(0,0,.25,1) 1 forwards;
animation-delay: var(--delay, 0s);
}
-.fade {
+.animCircle {
+ stroke-dasharray: var(--l);
+ stroke-dashoffset: var(--l);
+ animation: line var(--duration, 0.5s) cubic-bezier(0,0,.25,1) 1 forwards;
+ animation-delay: var(--delay, 0s);
+ transform-origin: center;
+ transform: rotate(-90deg);
+}
+
+.animCircleSuccess {
+ stroke-dasharray: var(--l);
+ stroke-dashoffset: var(--l);
+ animation: circleSuccess var(--duration, 0.5s) cubic-bezier(0,0,.25,1) 1 forwards;
+ animation-delay: var(--delay, 0s);
+ transform-origin: center;
+}
+
+.animFade {
opacity: 0;
animation: fade-in var(--duration, 0.5s) cubic-bezier(0,0,.25,1) 1 forwards;
animation-delay: var(--delay, 0s);
}
-@keyframes line-animation {
+@keyframes line {
0% {
stroke-dashoffset: var(--l);
opacity: 0;
@@ -98,6 +112,19 @@ const props = defineProps<{
}
}
+@keyframes circleSuccess {
+ 0% {
+ stroke-dashoffset: var(--l);
+ opacity: 0;
+ transform: rotate(-90deg);
+ }
+ 100% {
+ stroke-dashoffset: 0;
+ opacity: 1;
+ transform: rotate(90deg);
+ }
+}
+
@keyframes fade-in {
0% {
opacity: 0;
diff --git a/packages/frontend/src/pages/debug.vue b/packages/frontend/src/pages/debug.vue
index 4dae1b57a9..4a28d513f5 100644
--- a/packages/frontend/src/pages/debug.vue
+++ b/packages/frontend/src/pages/debug.vue
@@ -18,11 +18,11 @@ SPDX-License-Identifier: AGPL-3.0-only
]"
>
-
-
-
-
-
+
+
+
+
+