Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-06-13 05:37:44 +02:00
Code Issues 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
1 changed files with 16 additions and 2 deletions
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 type { MeowbaltEmotions } from "$lib/types/meowbalt";
export let emotion: MeowbaltEmotions;
type Props = {
emotion: MeowbaltEmotions;
};
const { emotion }: Props = $props();
let loaded = $state(false);
</script>
<img
class="meowbalt {emotion}"
class:loaded
onload={() => (loaded = true)}
src="/meowbalt/{emotion}.png"
height="152"
alt={$t('general.meowbalt')}
alt={$t("general.meowbalt")}
aria-hidden="true"
/>
@ -18,6 +26,12 @@
display: block;
margin: 0;
object-fit: cover;
opacity: 0;
transition: opacity 0.15s;
}
.meowbalt.loaded {
opacity: 1;
}
.error {