VnPower/PixivFE
1
0
Fork 0
mirror of https://codeberg.org/VnPower/PixivFE synced 2024-12-06 19:16:23 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Revert "loading-indicator rework draft"

Browse Source 
This reverts commit 0b55d1dc2c443b308ea514bbe104d9d37c037ce7.
This commit is contained in:
perennial
2024-10-07 14:27:39 +11:00
parent 1fe2acb187
commit ebe94494d9
3 changed files with 18 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/bootstrap-style.css
Vendored
+8 -41
View File
@@ -13018,11 +13018,11 @@ h6, .h6 {
}
#loading-indicator {
height: 0.5rem;
animation: wave-motion 3s ease-in-out infinite;
background-image: linear-gradient(90deg, transparent, var(--bs-custom-color), transparent);
background-size: 200% 100%;
will-change: opacity, background-position;
height: 4px;
animation: rolling-something 1s linear infinite;
background-image: repeating-linear-gradient(-0.25turn, #118bee 0vw, transparent 40vw);
background-size: 80vw auto;
will-change: opacity;
transition: opacity 0.3s;
opacity: 0;
}
@@ -13031,46 +13031,13 @@ h6, .h6 {
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 576px) {
#loading-indicator {
height: 0.3rem;
animation-duration: 2s;
background-size: 150% 100%;
}
#loading-indicator.htmx-request {
transition-duration: 0.5s;
}
}
@media (min-width: 577px) and (max-width: 992px) {
#loading-indicator {
height: 0.4rem;
animation-duration: 2.5s;
background-size: 175% 100%;
}
#loading-indicator.htmx-request {
transition-duration: 0.75s;
}
}
@media (min-width: 993px) {
#loading-indicator {
height: 0.5rem;
animation-duration: 3s;
background-size: 200% 100%;
}
#loading-indicator.htmx-request {
transition-duration: 1s;
}
}
@keyframes wave-motion {
@keyframes rolling-something {
0% {
background-position: 100% 0;
}
50% {
background-position: 0% 0;
background-position-x: 0vw;
}
100% {
background-position: -100% 0;
background-position-x: 40vw;
}
}
assets/css/bootstrap-style.scss
Vendored
+9 -44
View File
@@ -279,16 +279,16 @@ h6 {
}
/// Loading indicator for hx-requests
/// ref (old): https://stackoverflow.com/questions/63787241/css-how-to-create-an-infinitely-moving-repeating-linear-gradient/63787567#63787567
/// ref: https://stackoverflow.com/questions/63787241/css-how-to-create-an-infinitely-moving-repeating-linear-gradient/63787567#63787567
#loading-indicator {
height: 0.5rem;
height: 4px;
/// background-size: 200px auto;
animation: wave-motion 3s ease-in-out infinite;
background-image: linear-gradient(90deg, transparent, var(--bs-custom-color), transparent);
background-size: 200% 100%;
animation: rolling-something 1s linear infinite;
background-image: repeating-linear-gradient(-0.25turn, #118bee 0vw, transparent 40vw);
background-size: 80vw auto;
will-change: opacity, background-position;
will-change: opacity;
transition: opacity 0.3s;
opacity: 0;
@@ -297,49 +297,14 @@ h6 {
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
// Responsive adjustments
@media (max-width: 576px) {
height: 0.3rem;
animation-duration: 2s;
background-size: 150% 100%;
&.htmx-request {
transition-duration: 0.5s;
}
}
@media (min-width: 577px) and (max-width: 992px) {
height: 0.4rem;
animation-duration: 2.5s;
background-size: 175% 100%;
&.htmx-request {
transition-duration: 0.75s;
}
}
@media (min-width: 993px) {
height: 0.5rem;
animation-duration: 3s;
background-size: 200% 100%;
&.htmx-request {
transition-duration: 1s;
}
}
}
@keyframes wave-motion {
@keyframes rolling-something {
0% {
background-position: 100% 0;
}
50% {
background-position: 0% 0;
background-position-x: 0vw
}
100% {
background-position: -100% 0;
background-position-x: 40vw
}
}
assets/views/layout/default.jet.html
+1 -1
View File
@@ -62,7 +62,7 @@
</head>
<body class="bg-black">
<div id="loading-indicator" class="fixed-top z-3" aria-live="polite"></div>
<div id="loading-indicator" class="fixed-top z-3"></div>
<!-- mb-4 for spacing between the navbar and main content -->
<nav class="navbar bg-charcoal-surface1 py-3 mb-4" id="main-navbar">
<div class="container">