diff --git a/assets/js/page_upload.js b/assets/js/page_upload.js index 6ceda723d4993ef7516c5bdb497d19d6349f837e..67da37a43f007c038ee742bae4ad8733adac31d1 100644 --- a/assets/js/page_upload.js +++ b/assets/js/page_upload.js @@ -30,6 +30,14 @@ element.addEventListener("change", () => { image_title.placeholder = "Description"; image_container.appendChild(image_title); + const image_progress = document.createElement("div"); + image_progress.classList.add("progress"); + + const image_progress_indeterminate = document.createElement("div"); + image_progress_indeterminate.classList.add("indeterminate"); + + image_progress.appendChild(image_progress_indeterminate); + const image_link = document.createElement("a"); image_link.classList.add("image"); const image = document.createElement("img"); diff --git a/assets/sass/_page_upload.sass b/assets/sass/_page_upload.sass index fa37abdeca6e961b8543b72671e76d773957d509..d0261c6d3b12f1ca67079f0b742887fe92a4ece0 100644 --- a/assets/sass/_page_upload.sass +++ b/assets/sass/_page_upload.sass @@ -147,6 +147,37 @@ & + .image border-top-left-radius: 4px border-top-right-radius: 4px + .progress + position: absolute + height: 4px + display: block + background-color: rgba(255, 193, 7, 0.2) + overflow: hidden + transition: opacity 400ms + bottom: 0 + left: 0 + right: 0 + .indeterminate + background-color: rgba(255, 193, 7, 0.8) + &::before + content: '' + position: absolute + background-color: inherit + top: 0 + left: 0 + bottom: 0 + will-change: left, right + animation: indeterminate 4.2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite + &::after + content: '' + position: absolute + background-color: inherit + top: 0 + left: 0 + bottom: 0 + will-change: left, right + animation: indeterminate-short 4.2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite + animation-delay: 2.25s .image background: #000 display: flex @@ -177,4 +208,26 @@ &.submitted .container.centered display: none &:not(.submitted) .uploading.images - display: none \ No newline at end of file + display: none + +@keyframes indeterminate + 0% + left: -35% + right: 100% + 60% + left: 100% + right: -90% + 100% + left: 100% + right: -90% + +@keyframes indeterminate-short + 0% + left: -200% + right: 100% + 60% + left: 107% + right: -8% + 100% + left: 107% + right: -8% \ No newline at end of file