diff options
| -rw-r--r-- | static/css/main.css | 106 | ||||
| -rw-r--r-- | static/scripts/upload.js | 37 |
2 files changed, 120 insertions, 23 deletions
diff --git a/static/css/main.css b/static/css/main.css index 42fc0ed..ca70e63 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -500,6 +500,7 @@ footer::before { .upload-area { position: relative; + overflow: hidden; } .upload-drag-box { @@ -508,37 +509,100 @@ footer::before { .upload-loading-indicator { position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + top: 0; + left: 0; + width: 100%; + height: 100%; display: flex; align-items: center; justify-content: center; - background: rgba(26, 0, 51, 0.55); + background: #1a0033cc; + box-shadow: none; + transition: none; z-index: 20; pointer-events: none; } -.upload-loading-icon { - font-size: 2.5em; - color: #ff99cc; - filter: drop-shadow(0 0 8px #ff99cc88); - animation: uploadspin 1.2s linear infinite; +.ib-loader-spinner { + position: relative; + width: 32px; + height: 32px; } -.upload-loading-icon { - font-size: 3em; - color: #ff99cc; - filter: drop-shadow(0 0 8px #ff99cc88); - animation: uploadspin 1.2s linear infinite; +.ib-loader-seg { + position: absolute; + width: 7px; + height: 7px; + background: #222244; + border: 1px solid #fff; + border-radius: 1px; + opacity: 0.35; + box-shadow: none; + transition: opacity 0.1s, background 0.1s; } -@keyframes uploadspin { - 0% { - transform: rotate(0deg); - } +.ib-loader-seg.active { + opacity: 1; + background: #ff99cc; + box-shadow: 0 0 2px 0 #99ccff; +} + +.ib-loader-seg:nth-child(1) { + top: 0px; + left: 12px; +} + +.ib-loader-seg:nth-child(2) { + top: 3px; + left: 19px; +} + +.ib-loader-seg:nth-child(3) { + top: 8px; + left: 24px; +} + +.ib-loader-seg:nth-child(4) { + top: 15px; + left: 27px; +} + +.ib-loader-seg:nth-child(5) { + top: 22px; + left: 24px; +} + +.ib-loader-seg:nth-child(6) { + top: 27px; + left: 19px; +} + +.ib-loader-seg:nth-child(7) { + top: 30px; + left: 12px; +} + +.ib-loader-seg:nth-child(8) { + top: 27px; + left: 5px; +} + +.ib-loader-seg:nth-child(9) { + top: 22px; + left: 0px; +} + +.ib-loader-seg:nth-child(10) { + top: 15px; + left: -3px; +} + +.ib-loader-seg:nth-child(11) { + top: 8px; + left: 0px; +} - 100% { - transform: rotate(360deg); - } +.ib-loader-seg:nth-child(12) { + top: 3px; + left: 5px; }
\ No newline at end of file diff --git a/static/scripts/upload.js b/static/scripts/upload.js index 5d0f3ec..6342aa2 100644 --- a/static/scripts/upload.js +++ b/static/scripts/upload.js @@ -123,9 +123,43 @@ function setUploadLoadingIndicator(show) { indicator = document.createElement('div'); indicator.id = '_uploadLoadingIndicator'; indicator.className = 'upload-loading-indicator'; - indicator.innerHTML = '<span class="upload-loading-icon">✦</span>'; + // Segmented ring spinner markup, no text + indicator.innerHTML = ` + <div class="upload-loading-icon"> + <div class="ib-loader-spinner"> + <div class="ib-loader-seg"></div> + <div class="ib-loader-seg"></div> + <div class="ib-loader-seg"></div> + <div class="ib-loader-seg"></div> + <div class="ib-loader-seg"></div> + <div class="ib-loader-seg"></div> + <div class="ib-loader-seg"></div> + <div class="ib-loader-seg"></div> + <div class="ib-loader-seg"></div> + <div class="ib-loader-seg"></div> + <div class="ib-loader-seg"></div> + <div class="ib-loader-seg"></div> + </div> + </div> + `; dragBox.appendChild(indicator); } + // Animation logic for retro ring spinner + const spinner = indicator.querySelector('.ib-loader-spinner'); + const segments = spinner ? spinner.querySelectorAll('.ib-loader-seg') : []; + if (show && segments.length) { + let frame = 0; + if (!indicator._retroAnimInterval) { + indicator._retroAnimInterval = setInterval(() => { + segments.forEach((seg, idx) => seg.classList.toggle('active', idx === frame)); + frame = (frame + 1) % segments.length; + }, 80); + } + } else if (!show && indicator._retroAnimInterval) { + clearInterval(indicator._retroAnimInterval); + indicator._retroAnimInterval = null; + segments.forEach(seg => seg.classList.remove('active')); + } indicator.style.display = show ? 'flex' : 'none'; } @@ -337,4 +371,3 @@ function handleFiles(files) { } setupLocalImageUpload(); - |