From b1dc8c2772cd3996a01365cb0b12fd9ea6dab62c Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 30 Oct 2023 13:06:55 +0100 Subject: [PATCH] Overview: animate services count value --- css/Pages/More/Overview.css | 17 +++++++++++++++++ js/UI/More/Overview/Overview.js | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/css/Pages/More/Overview.css b/css/Pages/More/Overview.css index 986a3d5..8096f6f 100644 --- a/css/Pages/More/Overview.css +++ b/css/Pages/More/Overview.css @@ -12,9 +12,26 @@ font-size: 80px; } +@property --value { + syntax: ''; + initial-value: 0; + inherits: false; +} + .overview .big { font-size: 64px; margin-bottom: -4px; + counter-reset: value var(--value); + transition: --value 1.2s; +} + +.page:not(.current) .overview .big { + --value: 0 !important; + transition: --value 0s .5s; +} + +.overview .big::after { + content: counter(value); } .overview .small { diff --git a/js/UI/More/Overview/Overview.js b/js/UI/More/Overview/Overview.js index 79af974..253013d 100644 --- a/js/UI/More/Overview/Overview.js +++ b/js/UI/More/Overview/Overview.js @@ -27,7 +27,7 @@ export default class Overview { stats.secure += analysis.isSecure stats.thirdParties += analysis.isThirdParty } - this.div.querySelector(".big").innerText = stats.total + this.div.querySelector(".big").setAttribute("style", `--value: ${stats.total}`) this.div.querySelector(".small").innerText = `Available service${s(stats.total)}` let encryption_t, encryption_d