From 4bdb920c71653849ca28f5e8945a70be8750472c Mon Sep 17 00:00:00 2001 From: Niko Abeler Date: Thu, 9 May 2024 10:58:32 +0200 Subject: [PATCH] add animation while uploading a dropped file --- web/static/editor.js | 6 ++++++ web/static/style.css | 23 ++++++++++++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/web/static/editor.js b/web/static/editor.js index fd51c82..f3932e7 100644 --- a/web/static/editor.js +++ b/web/static/editor.js @@ -30,6 +30,7 @@ function addFileDrop(id) { const formData = new FormData() formData.append("file", file) + textArea.classList.add("drop-file-process") fetch( "/admin/api/binaries", { @@ -44,6 +45,11 @@ function addFileDrop(id) { } else { textArea.value += `\n[${file.name}](${data.location})` } + textArea.classList.remove("drop-file-process") + }).catch(err => { + console.error(err); + }).finally(() => { + textArea.classList.remove("drop-file-process") }) } diff --git a/web/static/style.css b/web/static/style.css index cd29df1..e036c76 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -28,4 +28,25 @@ border-style: dashed; border-width: 4px; border-color: #5391ff; -} \ No newline at end of file +} + +@keyframes border-pulsate { + 0% { + border-color: #5391ff; + } + + 50% { + border-color: rgba(0, 255, 255, 0); + } + + 100% { + border-color: #5391ff; + } +} + +.drop-file-process { + border-style: dashed; + border-width: 4px; + border-color: #5391ff; + animation: border-pulsate 2s infinite; +}