MaciejkaG/kalkulator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add animation on load

Browse Source
This commit is contained in:
Maciej Gomola 2024-10-24 08:23:15 +02:00
parent d7dfc5309d
commit 7256c53f45
3 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/assets/css/style.css
View File

@ -20,6 +20,16 @@ body {
overflow: hidden; overflow: hidden;
} }
.loader {
background-color: var(--theme-bg);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.material-symbols-outlined { .material-symbols-outlined {
font-variation-settings: font-variation-settings:
'FILL' 1, 'FILL' 1,

17
static/assets/js/colors.js
View File

@ -16,4 +16,19 @@ function applyUIColors() {
const buttonSecondary = document.getElementById('button-secondary').value; const buttonSecondary = document.getElementById('button-secondary').value;
setUIColors(background, text, buttonPrimary, buttonSecondary); setUIColors(background, text, buttonPrimary, buttonSecondary);
} }
window.addEventListener('load', () => {
$('.loader').hide();
anime({
targets: '.calculator button.button',
opacity: [0, 1],
scale: [0, 1],
easing: 'easeOutBack',
duration: 500,
delay: anime.stagger(35),
complete: () => {
$('.calculator button.button').removeAttr('style');
}
});
});

1
static/index.html
View File

@ -21,6 +21,7 @@
<link rel="stylesheet" href="./assets/css/keyboard.css"> <link rel="stylesheet" href="./assets/css/keyboard.css">
</head> </head>
<body> <body>
<div class="loader"></div>
<div class="history-container" id="history"> <div class="history-container" id="history">
<span>5+10<strong> = 15</strong></span> <span>5+10<strong> = 15</strong></span>
<span>7*8<strong> = 56</strong></span> <span>7*8<strong> = 56</strong></span>