.

src/style/_loading.scss

@@ -0,0 +1,120 @@
+.loading-indicator {
+  --loading-progress: 0%;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+  width: min(78vw, 320px);
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-time-long);
+
+  > .loading-dots {
+    display: flex;
+    gap: 14px;
+    align-items: center;
+    justify-content: center;
+
+    > .loading-dot {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: rgb(255 255 255 / 92%);
+      box-shadow:
+        0 0 18px rgb(255 255 255 / 38%),
+        0 0 4px rgb(255 255 255 / 60%);
+      transform: scale(0.5);
+      opacity: 0.4;
+      animation: loading-bloom 1.4s ease-in-out infinite;
+
+      &:nth-child(2) {
+        animation-delay: 0.18s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.36s;
+      }
+    }
+  }
+
+  > .loading-status {
+    color: rgb(255 255 255 / 88%);
+    font:
+      600 16px/1.25 'Open Sans',
+      sans-serif;
+    text-align: center;
+    text-shadow: 0 1px 12px rgb(0 0 0 / 60%);
+    letter-spacing: 0.01em;
+    min-height: 1.25em;
+  }
+
+  > .loading-progress {
+    position: relative;
+    width: 100%;
+    height: 3px;
+    overflow: hidden;
+    border-radius: 999px;
+    background: rgb(255 255 255 / 14%);
+    box-shadow: 0 1px 6px rgb(0 0 0 / 28%);
+
+    > .loading-progress-fill {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: var(--loading-progress);
+      border-radius: inherit;
+      background: linear-gradient(
+        90deg,
+        rgb(255 255 255 / 72%),
+        rgb(255 255 255 / 96%)
+      );
+      box-shadow: 0 0 12px rgb(255 255 255 / 38%);
+      transition: width var(--transition-time-long) ease-out;
+    }
+  }
+}
+
+html > body.is-loading {
+  .loading-indicator {
+    opacity: 1;
+  }
+
+  .eraser-preview {
+    display: none;
+  }
+
+  aside.control-dock {
+    opacity: 0;
+    visibility: hidden;
+    translate: 0 36px;
+  }
+}
+
+@keyframes loading-bloom {
+  0%,
+  100% {
+    transform: scale(0.5);
+    opacity: 0.35;
+  }
+
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading-indicator > .loading-dots > .loading-dot {
+    animation: none;
+    transform: scale(0.85);
+    opacity: 0.85;
+  }
+}