From 4adca586edb47244b70b96d320f3e9af4cacb75d Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 26 Apr 2026 12:11:15 +0900
Subject: [PATCH] wip

---
 .../frontend/src/components/MkProgressBar.vue | 60 +++++++++++++++++++
 packages/frontend/src/pages/room.vue          | 15 +----
 2 files changed, 62 insertions(+), 13 deletions(-)
 create mode 100644 packages/frontend/src/components/MkProgressBar.vue

diff --git a/packages/frontend/src/components/MkProgressBar.vue b/packages/frontend/src/components/MkProgressBar.vue
new file mode 100644
index 0000000000..e8bd2192d4
--- /dev/null
+++ b/packages/frontend/src/components/MkProgressBar.vue
@@ -0,0 +1,60 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div
+	:class="[$style.root, { [$style.waiting]: waiting }]" :style="{
+		'--p': progress != null ? `${progress * 100}%` : '0%',
+	}"
+>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+
+const props = withDefaults(defineProps<{
+	progress?: number;
+	waiting?: boolean;
+}>(), {
+	progress: 0,
+	waiting: false,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	--c1: color(from var(--MI_THEME-accent) srgb r g b / 0.25);
+	--c2: color(from var(--MI_THEME-accent) srgb r g b / 0.125);
+	position: relative;
+	height: 5px;
+	border-radius: 999px;
+	overflow: clip;
+	background: linear-gradient(-45deg, var(--c2) 25%, var(--c1) 25%,var(--c1) 50%, var(--c2) 50%, var(--c2) 75%, var(--c1) 75%, var(--c1));
+	background-size: 25px 25px;
+	animation: stripe .8s infinite linear;
+
+	&::before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: var(--p);
+		height: 100%;
+		background: var(--MI_THEME-accent);
+		transition: all 0.5s cubic-bezier(0,.5,.5,1);
+	}
+
+	&.waiting {
+		// TODO
+	}
+}
+
+@keyframes stripe {
+	0% { background-position-x: 0; }
+	100% { background-position-x: -25px; }
+}
+</style>
diff --git a/packages/frontend/src/pages/room.vue b/packages/frontend/src/pages/room.vue
index 040415a13f..f1f6d14e68 100644
--- a/packages/frontend/src/pages/room.vue
+++ b/packages/frontend/src/pages/room.vue
@@ -15,9 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:leaveToClass="$style.transition_fade_leaveTo"
 		>
 			<div v-if="!controller.isReady.value" :class="$style.loading">
-				<div :class="$style.progressBar">
-					<div :class="$style.progressBarValue" :style="{ width: `${controller.initializeProgress.value * 100}%` }"></div>
-				</div>
+				<MkProgressBar :class="$style.progressBar" :progress="controller.initializeProgress.value" :waiting="controller.initializeProgress.value === 1"/>
 			</div>
 		</Transition>
 
@@ -173,6 +171,7 @@ import { cm, getHex, getRgb } from '@/world/utility.js';
 import { deepClone } from '@/utility/clone.js';
 import { GRAPHICS_QUALITY_HIGH, GRAPHICS_QUALITY_LOW, GRAPHICS_QUALITY_MEDIUM } from '@/world/room/engine.js';
 import { deviceKind } from '@/utility/device-kind.js';
+import MkProgressBar from '@/components/MkProgressBar.vue';
 
 const canvas = useTemplateRef('canvas');
 
@@ -461,16 +460,6 @@ definePage(() => ({
 
 .progressBar {
 	width: 75%;
-	height: 4px;
-	border-radius: 999px;
-	overflow: clip;
-	background-color: var(--MI_THEME-accentedBg);
-}
-
-.progressBarValue {
-	height: 100%;
-	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
-	transition: all 0.5s cubic-bezier(0,.5,.5,1);
 }
 
 .transition_fade_enterActive,