diff --git a/css/style.css b/css/style.css
index a406ba8..28f1735 100644
--- a/css/style.css
+++ b/css/style.css
@@ -46,7 +46,6 @@ a:hover {
padding: 1em;
- /* width: 40em; */
max-width: 90%;
background-color: rgba(255, 255, 255, 0.2);
border-style: solid;
@@ -142,3 +141,71 @@ ul.buttons li {
.footer {
font-size: 0.9em;
}
+
+.fadeout {
+ -webkit-animation: fadeout 0.25s linear 1;
+ -webkit-animation-fill-mode: forwards;
+ animation: fadeout 0.25s linear 1;
+ animation-fill-mode: both;
+}
+
+#preloader {
+ width: 100%;
+ height: 100%;
+ display: inline-block;
+ overflow: hidden;
+ background-color: black;
+ z-index: 100;
+ margin: 0;
+ position: fixed;
+ top: 0;
+ left: 0;
+}
+
+.spinner {
+ width: 140px;
+ height: 140px;
+ position: relative;
+ backface-visibility: hidden;
+ transform-origin: 0 0;
+ transform: translate(-50%, -50%);
+ top: 50%;
+ left: 50%;
+
+ background-image: url("https://cdn.enp.one/img/logos/aah-sm.jpg");
+ background-size: contain;
+ border-radius: 50%;
+}
+
+.spinner div {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ border: 20px solid rgba(213, 213, 213, 0.7);
+ border-top-color: transparent;
+ border-radius: 50%;
+ animation: spinner 1.5s linear infinite;
+ top: 50%;
+ left: 50%;
+ box-sizing: content-box;
+}
+
+@-webkit-keyframes fadeout {
+ 0% {opacity: 1;}
+ 100% {opacity: 0;}
+}
+
+@keyframes fadeout {
+ 0% {opacity: 1;}
+ 100% {opacity: 0;}
+}
+
+@-webkit-keyframes spinner {
+ 0% { transform: translate(-50%,-50%) rotate(0deg); }
+ 100% { transform: translate(-50%,-50%) rotate(360deg); }
+}
+
+@keyframes spinner {
+ 0% { transform: translate(-50%,-50%) rotate(0deg); }
+ 100% { transform: translate(-50%,-50%) rotate(360deg); }
+}
diff --git a/index.html b/index.html
index 157d34b..2b30d28 100644
--- a/index.html
+++ b/index.html
@@ -18,15 +18,19 @@
+
+
-
+
-
AllAroundHere
+
All Around Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
diff --git a/js/custom.js b/js/custom.js
index 6417523..c7ae577 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -78,7 +78,7 @@ function selectBackground() {
}
-function setBackground() {
+window.addEventListener("DOMContentLoaded", function () {
let selected = selectBackground()
document.getElementById(
@@ -92,4 +92,9 @@ function setBackground() {
document.getElementById(
"background-info-link"
).href = selected.source;
-}
+});
+
+
+window.addEventListener("load", function () {
+ document.getElementById("preloader").classList.add("fadeout");
+});