diff --git a/src/contact.html b/src/contact.html index f4a4d1e..1d53f6a 100644 --- a/src/contact.html +++ b/src/contact.html @@ -6,10 +6,9 @@

Contact

+
+> diff --git a/src/events.html b/src/events.html index 7ff1126..1d88e0f 100644 --- a/src/events.html +++ b/src/events.html @@ -5,10 +5,10 @@ ---

Events

+ +
+> diff --git a/src/scripts/app.js b/src/scripts/app.js index 8685621..4cfb94b 100644 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -30,4 +30,14 @@ $(document).ready(() => { localStorage.setItem('theme', newTheme); applyTheme(newTheme); }); + + // iframe loading + const iframe = document.querySelector('iframe'); + if (iframe) { + setTimeout(() => { + iframe.style.visibility = 'visible'; + const loadingIcon = document.querySelector('.loading-icon'); + loadingIcon.style.display = 'none'; + }, 2000); + } }); diff --git a/src/styles/style.css b/src/styles/style.css index f90a4a8..d218559 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -341,6 +341,7 @@ iframe { border-radius: 1rem; background-color: var(--white); overflow: hidden; + visibility: hidden; } .day-mode iframe { @@ -352,6 +353,25 @@ iframe { box-shadow: 0px 4px 6px rgba(128, 128, 128, 0.45); } +.loading-icon { + width: 50px; + height: 50px; + border: 5px solid var(--day-blue); + border-top: 5px solid var(--day-purple); + border-radius: 50%; + animation: spin 3s linear infinite; + margin: 0 auto; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + /* home */ .tagline {