added loading indicator

2026-02-11 07:04:59 +00:00
parent 081493d13f
commit 1f5910a996
4 changed files with 68 additions and 4 deletions
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -939,6 +939,39 @@ body.theme-light .setting-item select option {
    text-align: left;
 }

+.video-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.45);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+    z-index: 4;
+}
+
+.video-card.is-loading .video-loading,
+.favorite-card.is-loading .video-loading {
+    opacity: 1;
+}
+
+.video-loading-spinner {
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    border: 3px solid rgba(255, 255, 255, 0.35);
+    border-top-color: var(--text-primary);
+    animation: video-card-spinner 0.8s linear infinite;
+}
+
+@keyframes video-card-spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 .uploader-link:hover {
    color: var(--text-primary);
    text-decoration: underline;