From a57bc8e3b588906d85c62915372c8d2f2edbc374 Mon Sep 17 00:00:00 2001 From: Flo Greistorfer Date: Thu, 25 Sep 2025 14:27:12 +0200 Subject: [PATCH] added loader to imagelist --- StaticGalleryBuilder.code-workspace | 12 ++-- files/global.css | 7 +++ templates/functionality.js | 24 +++++--- themes/alpenglow-dark.css | 20 +++++++ themes/alpenglow.css | 22 +++++++- themes/aritim-dark.css | 46 ++++++++++++++++ themes/aritim.css | 46 ++++++++++++++++ themes/autumn.css | 74 ++++++++++++++++++++++--- themes/carnation.css | 30 ++++++++++ themes/catpuccin.css | 85 +++++++++++++++++++++++++++++ themes/cornflower.css | 30 ++++++++++ themes/default-dark.css | 21 +++++++ themes/default.css | 21 +++++++ themes/ivy.css | 30 ++++++++++ themes/kjoe.css | 30 ++++++++++ themes/monokai-vibrant.css | 85 +++++++++++++++++++++++++++++ themes/rainbow.css | 30 ++++++++++ themes/spring.css | 74 ++++++++++++++++++++++--- themes/steam.css | 48 +++++++++++++++- themes/summer.css | 48 ++++++++++++++++ themes/sunflower.css | 30 ++++++++++ themes/winter.css | 48 ++++++++++++++++ 22 files changed, 830 insertions(+), 31 deletions(-) diff --git a/StaticGalleryBuilder.code-workspace b/StaticGalleryBuilder.code-workspace index 0f2a966..8bec00d 100644 --- a/StaticGalleryBuilder.code-workspace +++ b/StaticGalleryBuilder.code-workspace @@ -90,6 +90,8 @@ "Scans", "--exclude-folder", "*/Galleries/*", + "--exclude-folder", + "*/Wallpaper/*", "--folderthumbnails" ], "console": "integratedTerminal", @@ -160,10 +162,12 @@ } ], "prettier.htmlWhitespaceSensitivity": "css", - "pylint.args": [ - "--disable=C0111", - "--disable=C0301", - "--good-names-rgxs=^[_a-z][_a-z0-9]?$" + "python-envs.pythonProjects": [ + { + "path": "", + "envManager": "ms-python.python:pyenv", + "packageManager": "ms-python.python:pip" + } ], "python.analysis.inlayHints.callArgumentNames": "off", "python.analysis.inlayHints.functionReturnTypes": false, diff --git a/files/global.css b/files/global.css index dfe59f9..2f04164 100644 --- a/files/global.css +++ b/files/global.css @@ -66,6 +66,13 @@ body { padding: 0 2px; } +.centerload { + margin-top: 100px; + display: flex; + justify-content: center; + align-items: center; +} + figure { margin: 0; } diff --git a/templates/functionality.js b/templates/functionality.js index fd5adcc..b164404 100644 --- a/templates/functionality.js +++ b/templates/functionality.js @@ -81,15 +81,19 @@ class PhotoGallery { document .querySelectorAll("#tagdropdown input.tagcheckbox:checked") .forEach((checkbox) => (checkbox.checked = false)); - window.history.replaceState( - { html: content, pageTitle: title }, - "", - path - ); + window.history.replaceState({ html: content, pageTitle: title }, "", path); this.requestMetadata(); } + showLoader() { + const imagelist = document.getElementById("imagelist"); + imagelist.innerHTML = ''; + imagelist.classList.add("centerload"); + imagelist.classList.remove("row"); + } + async recursive() { + this.showLoader(); const loc = new URL(window.location.href); const content = document.documentElement.innerHTML; const title = document.title; @@ -160,6 +164,7 @@ class PhotoGallery { } requestMetadata() { + this.showLoader(); const hash = window.location.hash; const searchParams = new URLSearchParams(window.location.search); fetch(".metadata.json") @@ -190,7 +195,8 @@ class PhotoGallery { const searchParams = new URLSearchParams(window.location.search); this.shown = []; let path = decodeURIComponent( - window.location.origin + window.location.pathname.replace("index.html", "") + window.location.origin + + window.location.pathname.replace("index.html", "") ); if (path.startsWith("null")) { path = window.location.protocol + "//" + path.substring(4); @@ -252,7 +258,11 @@ class PhotoGallery { if (item.raw) str += ` RAW`; str += ""; }); - imagelist.innerHTML = str; + setTimeout(function () { + imagelist.classList.add("row"); + imagelist.classList.remove("centerload"); + imagelist.innerHTML = str; + }, 5000); } setFilter(selected) { diff --git a/themes/alpenglow-dark.css b/themes/alpenglow-dark.css index 6e3d41b..d527939 100644 --- a/themes/alpenglow-dark.css +++ b/themes/alpenglow-dark.css @@ -118,3 +118,23 @@ body { color: var(--bcolor1); font-weight: 600; } + +.loader { + width: 48px; + height: 48px; + border-radius: 50%; + display: inline-block; + border-top: 3px solid var(--bcolor1); + border-right: 3px solid transparent; + box-sizing: border-box; + animation: rotation 1s linear infinite; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/themes/alpenglow.css b/themes/alpenglow.css index 54e631a..a1e2550 100644 --- a/themes/alpenglow.css +++ b/themes/alpenglow.css @@ -116,4 +116,24 @@ body { background-color: var(--color2); color: var(--bcolor2); font-weight: 600; -} \ No newline at end of file +} + +.loader { + width: 48px; + height: 48px; + border-radius: 50%; + display: inline-block; + border-top: 3px solid var(--bcolor2); + border-right: 3px solid transparent; + box-sizing: border-box; + animation: rotation 1s linear infinite; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/themes/aritim-dark.css b/themes/aritim-dark.css index 4c169b0..4356bbb 100644 --- a/themes/aritim-dark.css +++ b/themes/aritim-dark.css @@ -96,6 +96,52 @@ font-weight: 600; } +.loader { + width: 48px; + height: 48px; + border-radius: 50%; + position: relative; + animation: rotate 1s linear infinite +} + +.loader::before { + content: ""; + box-sizing: border-box; + position: absolute; + inset: 0px; + border-radius: 50%; + border: 5px solid var(--bcolor2); + animation: prixClipFix 2s linear infinite; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg) + } +} + +@keyframes prixClipFix { + 0% { + clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0) + } + + 25% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0) + } + + 50% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%) + } + + 75% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%) + } + + 100% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0) + } +} + body { color: var(--bcolor2); background-color: var(--bcolor3); diff --git a/themes/aritim.css b/themes/aritim.css index be5dcec..1958314 100644 --- a/themes/aritim.css +++ b/themes/aritim.css @@ -96,6 +96,52 @@ font-weight: 600; } +.loader { + width: 48px; + height: 48px; + border-radius: 50%; + position: relative; + animation: rotate 1s linear infinite +} + +.loader::before { + content: ""; + box-sizing: border-box; + position: absolute; + inset: 0px; + border-radius: 50%; + border: 5px solid var(--bcolor2); + animation: prixClipFix 2s linear infinite; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg) + } +} + +@keyframes prixClipFix { + 0% { + clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0) + } + + 25% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0) + } + + 50% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%) + } + + 75% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%) + } + + 100% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0) + } +} + body { color: var(--bcolor2); background-color: var(--bcolor3); diff --git a/themes/autumn.css b/themes/autumn.css index f325b4d..90d955a 100644 --- a/themes/autumn.css +++ b/themes/autumn.css @@ -1,14 +1,22 @@ @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap"); * { - --color1: #FF7F50; /* Coral */ - --color2: #D2691E; /* Chocolate */ - --color3: #8B4513; /* SaddleBrown */ - --color4: #FFA07A; /* LightSalmon */ - --bcolor1: #FFF8DC; /* Cornsilk */ - --bcolor2: #2F4F4F; /* DarkSlateGray */ - --bcolor3: #3E2723; /* Darker brown */ - --bcolor4: #4E342E; /* Slightly lighter brown */ + --color1: #FF7F50; + /* Coral */ + --color2: #D2691E; + /* Chocolate */ + --color3: #8B4513; + /* SaddleBrown */ + --color4: #FFA07A; + /* LightSalmon */ + --bcolor1: #FFF8DC; + /* Cornsilk */ + --bcolor2: #2F4F4F; + /* DarkSlateGray */ + --bcolor3: #3E2723; + /* Darker brown */ + --bcolor4: #4E342E; + /* Slightly lighter brown */ } .navbar { @@ -102,6 +110,54 @@ font-family: "Playfair Display", serif; } +.loader, +.loader:before, +.loader:after { + border-radius: 50%; + width: 2.5em; + height: 2.5em; + animation-fill-mode: both; + animation: bblFadInOut 1.8s infinite ease-in-out; +} + +.loader { + color: var(--bcolor2); + font-size: 7px; + position: relative; + text-indent: -9999em; + transform: translateZ(0); + animation-delay: -0.16s; +} + +.loader:before, +.loader:after { + content: ''; + position: absolute; + top: 0; +} + +.loader:before { + left: -3.5em; + animation-delay: -0.32s; +} + +.loader:after { + left: 3.5em; +} + +@keyframes bblFadInOut { + + 0%, + 80%, + 100% { + box-shadow: 0 2.5em 0 -1.3em + } + + 40% { + box-shadow: 0 2.5em 0 0 + } +} + body { color: var(--bcolor1); background-color: var(--bcolor3); @@ -109,4 +165,4 @@ body { font-optical-sizing: auto; font-weight: 400; font-style: normal; -} +} \ No newline at end of file diff --git a/themes/carnation.css b/themes/carnation.css index 07f14af..96f5b0a 100644 --- a/themes/carnation.css +++ b/themes/carnation.css @@ -95,6 +95,36 @@ font-weight: 800; } +.loader { + width: 12px; + height: 12px; + border-radius: 50%; + display: block; + margin: 15px auto; + position: relative; + color: var(--color1); + box-sizing: border-box; + animation: animloader 1s linear infinite alternate; +} + +@keyframes animloader { + 0% { + box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0; + } + + 33% { + box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0; + } + + 66% { + box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0; + } + + 100% { + box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px; + } +} + body { color: var(--bcolor1); background-color: var(--bcolor3); diff --git a/themes/catpuccin.css b/themes/catpuccin.css index 399133c..a1f8600 100644 --- a/themes/catpuccin.css +++ b/themes/catpuccin.css @@ -103,6 +103,91 @@ font-family: "Nunito", sans-serif; } +.loader { + transform: rotateZ(45deg); + perspective: 1000px; + border-radius: 50%; + width: 48px; + height: 48px; + color: var(--color1); +} + +.loader:before, +.loader:after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: inherit; + height: inherit; + border-radius: 50%; + transform: rotateX(70deg); + animation: 1s spin linear infinite; +} + +.loader:after { + color: var(--bcolor4); + transform: rotateY(70deg); + animation-delay: .4s; +} + +@keyframes rotate { + 0% { + transform: translate(-50%, -50%) rotateZ(0deg); + } + + 100% { + transform: translate(-50%, -50%) rotateZ(360deg); + } +} + +@keyframes rotateccw { + 0% { + transform: translate(-50%, -50%) rotate(0deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(-360deg); + } +} + +@keyframes spin { + + 0%, + 100% { + box-shadow: .2em 0px 0 0px currentcolor; + } + + 12% { + box-shadow: .2em .2em 0 0 currentcolor; + } + + 25% { + box-shadow: 0 .2em 0 0px currentcolor; + } + + 37% { + box-shadow: -.2em .2em 0 0 currentcolor; + } + + 50% { + box-shadow: -.2em 0 0 0 currentcolor; + } + + 62% { + box-shadow: -.2em -.2em 0 0 currentcolor; + } + + 75% { + box-shadow: 0px -.2em 0 0 currentcolor; + } + + 87% { + box-shadow: .2em -.2em 0 0 currentcolor; + } +} + body { color: var(--bcolor2); background-color: var(--bcolor3); diff --git a/themes/cornflower.css b/themes/cornflower.css index 3a1c502..30ad3ab 100644 --- a/themes/cornflower.css +++ b/themes/cornflower.css @@ -95,6 +95,36 @@ font-weight: 800; } +.loader { + width: 12px; + height: 12px; + border-radius: 50%; + display: block; + margin: 15px auto; + position: relative; + color: var(--color1); + box-sizing: border-box; + animation: animloader 1s linear infinite alternate; +} + +@keyframes animloader { + 0% { + box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0; + } + + 33% { + box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0; + } + + 66% { + box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0; + } + + 100% { + box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px; + } +} + body { color: var(--bcolor1); background-color: var(--bcolor3); diff --git a/themes/default-dark.css b/themes/default-dark.css index a600bbe..24001d3 100644 --- a/themes/default-dark.css +++ b/themes/default-dark.css @@ -74,6 +74,27 @@ font-weight: 800; } +.loader { + width: 48px; + height: 48px; + border-radius: 50%; + display: inline-block; + border-top: 3px solid var(--bcolor1); + border-right: 3px solid transparent; + box-sizing: border-box; + animation: rotation 1s linear infinite; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + body { color: var(--bcolor1); background-color: var(--color4); diff --git a/themes/default.css b/themes/default.css index 6dd3ef7..3e9729e 100644 --- a/themes/default.css +++ b/themes/default.css @@ -74,6 +74,27 @@ font-weight: 800; } +.loader { + width: 48px; + height: 48px; + border-radius: 50%; + display: inline-block; + border-top: 3px solid var(--bcolor2); + border-right: 3px solid transparent; + box-sizing: border-box; + animation: rotation 1s linear infinite; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + body { color: var(--bcolor2); background-color: var(--bcolor1); diff --git a/themes/ivy.css b/themes/ivy.css index 3a887f6..0ae4296 100644 --- a/themes/ivy.css +++ b/themes/ivy.css @@ -93,6 +93,36 @@ background-color: var(--color1); } +.loader { + width: 12px; + height: 12px; + border-radius: 50%; + display: block; + margin: 15px auto; + position: relative; + color: var(--color1); + box-sizing: border-box; + animation: animloader 1s linear infinite alternate; +} + +@keyframes animloader { + 0% { + box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0; + } + + 33% { + box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0; + } + + 66% { + box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0; + } + + 100% { + box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px; + } +} + body { color: var(--bcolor1); background-color: var(--bcolor3); diff --git a/themes/kjoe.css b/themes/kjoe.css index b57d32e..504017d 100644 --- a/themes/kjoe.css +++ b/themes/kjoe.css @@ -94,6 +94,36 @@ font-weight: 800; } +.loader { + width: 12px; + height: 12px; + border-radius: 50%; + display: block; + margin: 15px auto; + position: relative; + color: var(--bcolor1); + box-sizing: border-box; + animation: animloader 1s linear infinite alternate; +} + +@keyframes animloader { + 0% { + box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0; + } + + 33% { + box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0; + } + + 66% { + box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0; + } + + 100% { + box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px; + } +} + body { color: var(--bcolor1); background-color: var(--bcolor2); diff --git a/themes/monokai-vibrant.css b/themes/monokai-vibrant.css index 040e7e8..0f6a429 100644 --- a/themes/monokai-vibrant.css +++ b/themes/monokai-vibrant.css @@ -77,6 +77,91 @@ font-weight: 800; } +.loader { + transform: rotateZ(45deg); + perspective: 1000px; + border-radius: 50%; + width: 48px; + height: 48px; + color: var(--color2); +} + +.loader:before, +.loader:after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: inherit; + height: inherit; + border-radius: 50%; + transform: rotateX(70deg); + animation: 1s spin linear infinite; +} + +.loader:after { + color: var(--color4); + transform: rotateY(70deg); + animation-delay: .4s; +} + +@keyframes rotate { + 0% { + transform: translate(-50%, -50%) rotateZ(0deg); + } + + 100% { + transform: translate(-50%, -50%) rotateZ(360deg); + } +} + +@keyframes rotateccw { + 0% { + transform: translate(-50%, -50%) rotate(0deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(-360deg); + } +} + +@keyframes spin { + + 0%, + 100% { + box-shadow: .2em 0px 0 0px currentcolor; + } + + 12% { + box-shadow: .2em .2em 0 0 currentcolor; + } + + 25% { + box-shadow: 0 .2em 0 0px currentcolor; + } + + 37% { + box-shadow: -.2em .2em 0 0 currentcolor; + } + + 50% { + box-shadow: -.2em 0 0 0 currentcolor; + } + + 62% { + box-shadow: -.2em -.2em 0 0 currentcolor; + } + + 75% { + box-shadow: 0px -.2em 0 0 currentcolor; + } + + 87% { + box-shadow: .2em -.2em 0 0 currentcolor; + } +} + body { color: var(--bcolor1); background-color: var(--bcolor4); diff --git a/themes/rainbow.css b/themes/rainbow.css index f8c4f63..08f7e70 100644 --- a/themes/rainbow.css +++ b/themes/rainbow.css @@ -98,6 +98,36 @@ font-weight: 800; } +.loader { + width: 12px; + height: 12px; + border-radius: 50%; + display: block; + margin: 15px auto; + position: relative; + color: var(--color4); + box-sizing: border-box; + animation: animloader 1s linear infinite alternate; +} + +@keyframes animloader { + 0% { + box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0; + } + + 33% { + box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0; + } + + 66% { + box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0; + } + + 100% { + box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px; + } +} + body { color: var(--bcolor3); background-color: var(--bcolor1); diff --git a/themes/spring.css b/themes/spring.css index 514e69f..3518ad6 100644 --- a/themes/spring.css +++ b/themes/spring.css @@ -1,14 +1,22 @@ @import url("https://fonts.googleapis.com/css2?family=Lora:wght@300;400;500;600;700&display=swap"); * { - --color1: #FFB6C1; /* LightPink */ - --color2: #98FB98; /* PaleGreen */ - --color3: #FFD700; /* Gold */ - --color4: #87CEFA; /* LightSkyBlue */ - --bcolor1: #FFFFFF; /* White */ - --bcolor2: #2F4F4F; /* DarkSlateGray */ - --bcolor3: #FAF0E6; /* Linen */ - --bcolor4: #E6E6FA; /* Lavender */ + --color1: #FFB6C1; + /* LightPink */ + --color2: #98FB98; + /* PaleGreen */ + --color3: #FFD700; + /* Gold */ + --color4: #87CEFA; + /* LightSkyBlue */ + --bcolor1: #FFFFFF; + /* White */ + --bcolor2: #2F4F4F; + /* DarkSlateGray */ + --bcolor3: #FAF0E6; + /* Linen */ + --bcolor4: #E6E6FA; + /* Lavender */ } .navbar { @@ -102,6 +110,54 @@ font-family: "Lora", serif; } +.loader, +.loader:before, +.loader:after { + border-radius: 50%; + width: 2.5em; + height: 2.5em; + animation-fill-mode: both; + animation: bblFadInOut 1.8s infinite ease-in-out; +} + +.loader { + color: var(--bcolor2); + font-size: 7px; + position: relative; + text-indent: -9999em; + transform: translateZ(0); + animation-delay: -0.16s; +} + +.loader:before, +.loader:after { + content: ''; + position: absolute; + top: 0; +} + +.loader:before { + left: -3.5em; + animation-delay: -0.32s; +} + +.loader:after { + left: 3.5em; +} + +@keyframes bblFadInOut { + + 0%, + 80%, + 100% { + box-shadow: 0 2.5em 0 -1.3em + } + + 40% { + box-shadow: 0 2.5em 0 0 + } +} + body { color: var(--bcolor2); background-color: var(--bcolor3); @@ -109,4 +165,4 @@ body { font-optical-sizing: auto; font-weight: 400; font-style: normal; -} +} \ No newline at end of file diff --git a/themes/steam.css b/themes/steam.css index 3d463b1..1505ee6 100644 --- a/themes/steam.css +++ b/themes/steam.css @@ -102,6 +102,52 @@ font-weight: 700; } +.loader { + width: 48px; + height: 48px; + border-radius: 50%; + position: relative; + animation: rotate 1s linear infinite +} + +.loader::before { + content: ""; + box-sizing: border-box; + position: absolute; + inset: 0px; + border-radius: 50%; + border: 5px solid var(--color2); + animation: prixClipFix 2s linear infinite; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg) + } +} + +@keyframes prixClipFix { + 0% { + clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0) + } + + 25% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0) + } + + 50% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%) + } + + 75% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%) + } + + 100% { + clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0) + } +} + body { color: var(--bcolor1); background-color: var(--bcolor2); @@ -109,4 +155,4 @@ body { font-optical-sizing: auto; font-weight: 500; font-style: normal; -} +} \ No newline at end of file diff --git a/themes/summer.css b/themes/summer.css index 3ddb97d..74b079f 100644 --- a/themes/summer.css +++ b/themes/summer.css @@ -104,6 +104,54 @@ font-family: "Roboto", sans-serif; } +.loader, +.loader:before, +.loader:after { + border-radius: 50%; + width: 2.5em; + height: 2.5em; + animation-fill-mode: both; + animation: bblFadInOut 1.8s infinite ease-in-out; +} + +.loader { + color: var(--bcolor2); + font-size: 7px; + position: relative; + text-indent: -9999em; + transform: translateZ(0); + animation-delay: -0.16s; +} + +.loader:before, +.loader:after { + content: ''; + position: absolute; + top: 0; +} + +.loader:before { + left: -3.5em; + animation-delay: -0.32s; +} + +.loader:after { + left: 3.5em; +} + +@keyframes bblFadInOut { + + 0%, + 80%, + 100% { + box-shadow: 0 2.5em 0 -1.3em + } + + 40% { + box-shadow: 0 2.5em 0 0 + } +} + body { color: var(--bcolor2); background-color: var(--bcolor3); diff --git a/themes/sunflower.css b/themes/sunflower.css index 4dbc525..94e6022 100644 --- a/themes/sunflower.css +++ b/themes/sunflower.css @@ -96,6 +96,36 @@ font-weight: 800; } +.loader { + width: 12px; + height: 12px; + border-radius: 50%; + display: block; + margin: 15px auto; + position: relative; + color: var(--color1); + box-sizing: border-box; + animation: animloader 1s linear infinite alternate; +} + +@keyframes animloader { + 0% { + box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0; + } + + 33% { + box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0; + } + + 66% { + box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0; + } + + 100% { + box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px; + } +} + body { color: var(--bcolor1); background-color: var(--bcolor3); diff --git a/themes/winter.css b/themes/winter.css index 0e30620..97ad58b 100644 --- a/themes/winter.css +++ b/themes/winter.css @@ -111,6 +111,54 @@ font-family: "Montserrat", sans-serif; } +.loader, +.loader:before, +.loader:after { + border-radius: 50%; + width: 2.5em; + height: 2.5em; + animation-fill-mode: both; + animation: bblFadInOut 1.8s infinite ease-in-out; +} + +.loader { + color: var(--bcolor2); + font-size: 7px; + position: relative; + text-indent: -9999em; + transform: translateZ(0); + animation-delay: -0.16s; +} + +.loader:before, +.loader:after { + content: ''; + position: absolute; + top: 0; +} + +.loader:before { + left: -3.5em; + animation-delay: -0.32s; +} + +.loader:after { + left: 3.5em; +} + +@keyframes bblFadInOut { + + 0%, + 80%, + 100% { + box-shadow: 0 2.5em 0 -1.3em + } + + 40% { + box-shadow: 0 2.5em 0 0 + } +} + body { color: var(--bcolor2); background-color: var(--bcolor3);