mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2025-06-28 01:18:27 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

web/Meowbalt: fade in meowbalt assets on load

Browse Source
This commit is contained in:
wukko 2025-05-04 15:30:45 +06:00
parent 6370420392
commit 0cecdc32a6
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/misc/Meowbalt.svelte
View File

@ -2,14 +2,22 @@
import { t } from "$lib/i18n/translations"; import { t } from "$lib/i18n/translations";
import type { MeowbaltEmotions } from "$lib/types/meowbalt"; import type { MeowbaltEmotions } from "$lib/types/meowbalt";
export let emotion: MeowbaltEmotions; type Props = {
emotion: MeowbaltEmotions;
};
const { emotion }: Props = $props();
let loaded = $state(false);
</script> </script>
<img <img
class="meowbalt {emotion}" class="meowbalt {emotion}"
class:loaded
onload={() => (loaded = true)}
src="/meowbalt/{emotion}.png" src="/meowbalt/{emotion}.png"
height="152" height="152"
alt={$t('general.meowbalt')} alt={$t("general.meowbalt")}
aria-hidden="true" aria-hidden="true"
/> />
@ -18,6 +26,12 @@
display: block; display: block;
margin: 0; margin: 0;
object-fit: cover; object-fit: cover;
opacity: 0;
transition: opacity 0.15s;
}
.meowbalt.loaded {
opacity: 1;
} }
.error { .error {