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

22
public/scripts/loader.js
View File

@ -2,11 +2,27 @@ const ELEMENT_ID = 'loader';
export function showLoader() {
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);
$('body').append(container);
}
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',
})
}