From 74dc2e5ac24a02dc19e70b391a9b45f636d57382 Mon Sep 17 00:00:00 2001 From: nercone-dev Date: Fri, 24 Apr 2026 23:14:22 +0900 Subject: [PATCH] -- --- public/assets/css/style-extra.css | 27 +++++++++++++++++ public/assets/js/script-extra.js | 48 +++++++++++++++++++++++++++++++ public/base.html | 5 ++++ 3 files changed, 80 insertions(+) diff --git a/public/assets/css/style-extra.css b/public/assets/css/style-extra.css index 5d2e9ef..42535db 100644 --- a/public/assets/css/style-extra.css +++ b/public/assets/css/style-extra.css @@ -133,3 +133,30 @@ header::after { background: #FFFFFF40; transform: translate(0, 0); } + +/* Loading Overlay */ +#loading-overlay { + view-transition-name: none; + position: fixed; + inset: 0; + z-index: 100000; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--color-dark-grey); + backdrop-filter: blur(40px); + -webkit-backdrop-filter: blur(40px); + pointer-events: none; + opacity: 1; +} +#loading-overlay svg { + width: 50vmin; + height: 50vmin; + opacity: 0; + filter: blur(20px); + transform: scale(1); + will-change: opacity, filter, transform; +} +#loading-overlay polyline { + will-change: stroke-dashoffset; +} diff --git a/public/assets/js/script-extra.js b/public/assets/js/script-extra.js index 334f4d1..0578756 100644 --- a/public/assets/js/script-extra.js +++ b/public/assets/js/script-extra.js @@ -303,3 +303,51 @@ init(); } })(); + +/* Loading Animation */ +(() => { + const overlay = document.getElementById('loading-overlay'); + if (!overlay) return; + + const svg = overlay.querySelector('svg'); + const line = overlay.querySelector('polyline'); + if (!svg || !line) { overlay.remove(); return; } + + const length = line.getTotalLength(); + line.style.strokeDasharray = length; + line.style.strokeDashoffset = length; + + const ease = 'cubic-bezier(0.22, 1, 0.36, 1)'; + const PHASE_IN = 3000; + const PHASE_WAIT = 1000; + const PHASE_OUT = 1000; + const opts = (d) => ({ duration: d, easing: ease, fill: 'forwards' }); + + svg.animate([ + { opacity: 0, transform: 'scale(1)', filter: 'blur(20px)' }, + { opacity: 1, transform: 'scale(0.5)', filter: 'blur(0px)' } + ], opts(PHASE_IN)); + line.animate([ + { strokeDashoffset: length }, + { strokeDashoffset: 0 } + ], opts(PHASE_IN)); + + setTimeout(() => { + svg.animate([ + { opacity: 1, transform: 'scale(0.5)', filter: 'blur(0px)' }, + { opacity: 0, transform: 'scale(0.75)', filter: 'blur(20px)' } + ], opts(PHASE_OUT)); + + line.animate([ + { strokeDashoffset: 0 }, + { strokeDashoffset: length } + ], opts(PHASE_OUT)); + + overlay.animate([ + { opacity: 1, backdropFilter: 'blur(40px)', WebkitBackdropFilter: 'blur(40px)' }, + { opacity: 0, backdropFilter: 'blur(0px)', WebkitBackdropFilter: 'blur(0px)' } + ], opts(PHASE_OUT)); + + setTimeout(() => overlay.remove(), PHASE_OUT); + }, PHASE_IN + PHASE_WAIT); +})(); diff --git a/public/base.html b/public/base.html index 7955f4b..f6ac9a5 100644 --- a/public/base.html +++ b/public/base.html @@ -56,6 +56,11 @@ {% block custom_body %}
+ {% block custom_header %}