added preloader

2026-01-02 11:44:05 +01:00
parent 012da8ff54
commit c75eb60c5b
3 changed files with 167 additions and 22 deletions
--- a/index.html
+++ b/index.html
@@ -10,9 +10,57 @@
        canvas { image-rendering: pixelated; background:#000; border:1px solid #555; }
        button { font-size:16px; padding:8px 14px; cursor:pointer; }
        #log { white-space:pre; font-size:14px; max-height:240px; overflow-y:auto; background:#222; padding:8px; }
+
+#preloader {
+	position: fixed;
+	inset: 0;
+	background: #0b0b0b;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 9999;
+}
+
+#preloaderBox {
+	width: 320px;
+	text-align: center;
+}
+
+#preloaderText {
+	margin-bottom: 10px;
+	font-size: 14px;
+	color: #ccc;
+}
+
+#preloaderBarOuter {
+	width: 100%;
+	height: 8px;
+	background: #222;
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+#preloaderBarInner {
+	height: 100%;
+	width: 0%;
+	background: #4ade80;
+	transition: width 0.2s linear;
+}
+
+        
    </style>
 </head>
 <body>
+
+<div id="preloader">
+	<div id="preloaderBox">
+		<div id="preloaderText">Loading MNIST…</div>
+		<div id="preloaderBarOuter">
+			<div id="preloaderBarInner"></div>
+		</div>
+	</div>
+</div>
+
    <h2>WebGPU MNIST Training — Batch 64</h2>
    <button id="trainBtn">Train</button>
    <div id="log"></div>