rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

update loader styling

Browse Source
This commit is contained in:
RossAscends
2023-11-01 12:40:21 +09:00
parent a0706fcfc8
commit 610c9b9f24
2 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/css/loader.css
View File

@ -13,7 +13,13 @@
width: 100svw; width: 100svw;
height: 100svh; height: 100svh;
background-color: var(--SmartThemeBlurTintColor); background-color: var(--SmartThemeBlurTintColor);
color: val(--SmartThemeBodyColor); /*for some reason the full screen blur does not work on iOS*/
opacity: 0.7; backdrop-filter: blur(30px);
transition: 500ms; color: var(--SmartThemeBodyColor);
opacity: 1;
}
#load-spinner {
transition: all 300ms ease-out;
opacity: 1;
} }

20
public/scripts/loader.js
View File

@ -2,11 +2,27 @@ const ELEMENT_ID = 'loader';
export function showLoader() { export function showLoader() {
const container = $('<div></div>').attr('id', ELEMENT_ID); const container = $('<div></div>').attr('id', ELEMENT_ID);
const loader = $('<div></div>').addClass('fa-solid fa-spinner fa-spin fa-3x'); const loader = $('<div></div>').attr('id', 'load-spinner').addClass('fa-solid fa-gear fa-spin fa-3x')
container.append(loader); container.append(loader);
$('body').append(container); $('body').append(container);
} }
export function hideLoader() { export function hideLoader() {
$(`#${ELEMENT_ID}`).remove(); //Sets up a 2-step animation. Spinner blurs/fades out, and then the loader shadow does the same.
$(`#load-spinner`).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
//console.log('FADING BLUR SCREEN')
$(`#${ELEMENT_ID}`)
.animate({ opacity: 0 }, 300, function () {
//console.log('REMOVING LOADER')
$(`#${ELEMENT_ID}`).remove()
})
})
//console.log('BLURRING SPINNER')
$(`#load-spinner`)
.css({
'filter': 'blur(15px)',
'opacity': '0',
})
} }