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"); +});