From 7256c53f458e889d6c543a85e7005f0c177b61da Mon Sep 17 00:00:00 2001 From: Maciej Gomola Date: Thu, 24 Oct 2024 08:23:15 +0200 Subject: [PATCH] Add animation on load --- static/assets/css/style.css | 10 ++++++++++ static/assets/js/colors.js | 17 ++++++++++++++++- static/index.html | 1 + 3 files changed, 27 insertions(+), 1 deletion(-) 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