diff --git a/static/assets/css/style.css b/static/assets/css/style.css
index 7613f9b..cd2ba9e 100644
--- a/static/assets/css/style.css
+++ b/static/assets/css/style.css
@@ -20,6 +20,16 @@ body {
overflow: hidden;
}
+.loader {
+ background-color: var(--theme-bg);
+
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+}
+
.material-symbols-outlined {
font-variation-settings:
'FILL' 1,
diff --git a/static/assets/js/colors.js b/static/assets/js/colors.js
index 010142c..b8b3271 100644
--- a/static/assets/js/colors.js
+++ b/static/assets/js/colors.js
@@ -16,4 +16,19 @@ function applyUIColors() {
const buttonSecondary = document.getElementById('button-secondary').value;
setUIColors(background, text, buttonPrimary, buttonSecondary);
-}
\ No newline at end of file
+}
+
+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');
+ }
+ });
+});
\ No newline at end of file
diff --git a/static/index.html b/static/index.html
index 335f88b..5bb9df3 100644
--- a/static/index.html
+++ b/static/index.html
@@ -21,6 +21,7 @@
+
5+10 = 15
7*8 = 56