UI: Fancier load animations

css/Background.css

@@ -30,4 +30,9 @@ body:not(.dark) #background:not(.scaled) img:last-child {
 body.dark #background.scaled img:first-child,
 body:not(.dark) #background.scaled img:last-child {
 	transform: none;
-}
+}
+
+#background .notloaded {
+	transform: scale(1) !important;
+	opacity: 0 !important;
+}

css/Flags/Flags.css

@@ -1,3 +1,4 @@
+@import url(Loaded.css);
 @import url(Dark.css);
 
 body {

css/Flags/Loaded.css

@@ -0,0 +1,16 @@
+body {
+	transition: opacity .3s;
+}
+
+body:not(.loaded) {
+	opacity: 0;
+	transition: none;
+}
+
+body:not(.loaded) * {
+	transition: none !important;
+}
+
+body:not(.loaded) .page .wrapper {
+	transform: scale(.8) translateY(50%);
+}

css/PageManager.css

@@ -1,78 +0,0 @@
-.page {
-	position: fixed;
-	top: 0;
-	left: 50%;
-	width: 100%;
-	max-width: 920px;
-	height: 100vh;
-	transform: translateX(-50%);
-	overflow-y: scroll;
-	transition: top .4s, opacity .4s, visibility .4s, color .3s;
-}
-
-.page:not(.current) {
-	top: 240px;
-	visibility: hidden;
-	opacity: 0;
-}
-
-.wrapper {
-	box-shadow: 2px 2px 8px #0003;
-	background: var(--background);
-	padding: 3px;
-	backdrop-filter: var(--blur);
-	border-radius: 24px;
-	margin: -4px 12px 16px;
-	text-align: center;
-	overflow: hidden;
-	min-width: 340px;
-	transition: background .2s;
-}
-
-.back {
-	box-shadow: 2px 2px 8px #0002;
-	position: relative;
-	width: 64px;
-	height: 64px;
-	border-radius: 24px;
-	background: var(--background);
-	margin: 20px;
-	backdrop-filter: var(--blur);
-	transition: background .2s;
-}
-
-.back i {
-	margin: 4px;
-	width: 56px;
-	height: 56px;
-	cursor: pointer;
-	border-radius: 20px;
-	transition: background .2s;
-}
-
-.back i:hover {
-	background: var(--hover);
-}
-
-.back i:after {
-	content: "chevron_left";
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	margin: 20px 20px 16px;
-}
-
-.header i {
-	margin-top: 1px;
-	margin-right: 10px;
-}
-
-.header .text {
-	font-size: 26px;
-}

css/Pages/Home.css

@@ -10,6 +10,12 @@
 	width: 192px;
 	height: 192px;
 	object-fit: cover;
+	transition: transform .4s, opacity .4s;
+}
+
+.appicon.notloaded {
+	transform: scale(.8);
+	opacity: 0;
 }
 
 #theme-switcher i::after {

css/Pages/Pages.css

@@ -1,3 +1,82 @@
 @import url(Home.css);
 @import url(Services.css);
 @import url(Settings.css);
+
+.page {
+	position: fixed;
+	top: 0;
+	left: 50%;
+	width: 100%;
+	max-width: 920px;
+	height: 100vh;
+	transform: translateX(-50%);
+	overflow-y: scroll;
+	transition: top .4s, opacity .4s, visibility .4s, color .3s;
+}
+
+.page:not(.current) {
+	top: 240px;
+	visibility: hidden;
+	opacity: 0;
+}
+
+.wrapper {
+	box-shadow: 2px 2px 8px #0003;
+	background: var(--background);
+	padding: 3px;
+	backdrop-filter: var(--blur);
+	border-radius: 24px;
+	margin: -4px 12px 16px;
+	text-align: center;
+	overflow: hidden;
+	min-width: 340px;
+	transition: background .2s, transform .4s, backdrop-filter .6s;
+}
+
+.back {
+	box-shadow: 2px 2px 8px #0002;
+	position: relative;
+	width: 64px;
+	height: 64px;
+	border-radius: 24px;
+	background: var(--background);
+	margin: 20px;
+	backdrop-filter: var(--blur);
+	transition: background .2s;
+}
+
+.back i {
+	margin: 4px;
+	width: 56px;
+	height: 56px;
+	cursor: pointer;
+	border-radius: 20px;
+	transition: background .2s;
+}
+
+.back i:hover {
+	background: var(--hover);
+}
+
+.back i:after {
+	content: "chevron_left";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	margin: 20px 20px 16px;
+}
+
+.header i {
+	margin-top: 1px;
+	margin-right: 10px;
+}
+
+.header .text {
+	font-size: 26px;
+}

css/Pages/Settings.css

@@ -12,7 +12,7 @@
 	border-radius: 16px;
 	align-items: center;
 	text-align: left;
-	transition: background .4s;
+	transition: background .3s;
 }
 
 .setting i {
@@ -37,7 +37,7 @@
 	background: #8886;
 	border-radius: 100px;
 	margin: 0 4px 0 auto;
-	transition: border .4s, background .4s;
+	transition: border .4s, background .3s;
 }
 
 .setting .switch:after {
@@ -50,7 +50,7 @@
 	top: 50%;
 	border-radius: 10px;
 	transform: translateY(-50%);
-	transition: left .2s, background .4s;
+	transition: left .2s, background .3s;
 }
 
 .setting.checked .switch {

index.html

@@ -7,7 +7,7 @@
 	<link rel="stylesheet" type="text/css" href="css/main.css">
 	<script src="js/main.js" type="module"></script>
 </head>
-<body class="init">
+<body>
 	<div id="background"></div>
 	<div class="main">
 

js/App.js

@@ -12,7 +12,6 @@ export default class App {
 	constructor(config) {
 		if (App.instance) return App.instance
 		App.instance = this
-		document.body.classList.remove("init")
 		this.config = new Config(config)
 		this.init()
 	}
@@ -24,5 +23,6 @@ export default class App {
 		this.settings = new Settings()
 
 		showPage("home")
+		document.body.classList.add("loaded")
 	}
 }

js/UI/Home/Home.js

@@ -35,6 +35,10 @@ export default class Home {
 	initHomeUI() {
 		let logo = document.getElementById("app-icon")
 		logo.src = this.config.get("icon")
+		logo.classList.add("notloaded")
+		logo.addEventListener("load", () => {
+			logo.classList.remove("notloaded")
+		})
 
 		let name = document.getElementById("app-name")
 		name.innerText = this.config.get("name")

js/UI/Main/Main.js

@@ -17,6 +17,10 @@ export default class Main {
 		this.backgrounds = document.getElementById("background")
 		for (let i = 0; i < 2; i++) {
 			let img = document.createElement("img")
+			img.classList.add("notloaded")
+			img.addEventListener("load", () => {
+				img.classList.remove("notloaded")
+			})
 			this.backgrounds.appendChild(img)
 		}