feat: Add loader step

- Add loader element with progress display
- Add styles for loader, spinner and bar
- Move event listeners for hint to intro step
- Add loadCore function to simulate loader
- Keep alternative progress bar for document loading display

source/style/ui.scss

@@ -34,6 +34,74 @@ $z-indexes: (
 	}
 }
 
+#loader {
+	@extend %full_parent;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: white;
+}
+
+#bar {
+	display: flex;
+	justify-content: space-between;
+	width: 50%;
+}
+
+#wrap {
+	flex: 1;
+	background-color: $color_back_basic;
+}
+
+#progress {
+	width: 0%;
+	height: 100%;
+	background-color: black;
+}
+
+#status,
+#spinner {
+	@extend %basic;
+	
+	display: flex;
+	flex-grow: 0;
+	flex-shrink: 0;
+	justify-content: center;
+	align-items: center;
+	margin-inline: $space_half;
+	padding-block: calc($space_half - 1px) $space_half;
+	line-height: $line_basic;
+	text-align: center;
+}
+
+#status {
+	width: 4em;
+	background-color: black;
+	color: white;
+}
+
+#spinner {
+	width: 2.5em;
+	background-color: $color_back_basic;
+	color: black;
+
+	span {
+		animation: rotate 1s linear infinite;
+	}
+}
+
+@keyframes rotate {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+
 #intro {
 	@extend %full_parent;
 
@@ -89,8 +157,8 @@ $z-indexes: (
 .toast {
 	z-index: map.get($z-indexes, "toast");
 	position: fixed;
-  right: $space_half;
-  bottom: $space_double;
+	right: $space_half;
+	bottom: $space_double;
 
 	p {
 		color: white;