Add preloader functionality

2021-01-31 18:58:33 -05:00 · 2021-01-31 18:58:33 -05:00 · 8c13782ffb
parent dde0f523a8
commit 8c13782ffb
3 changed files with 81 additions and 5 deletions
--- 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); }
+}
--- a/index.html
+++ b/index.html
@ -18,15 +18,19 @@
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

    <script type="text/javascript" src="js/custom.js"></script>
+
+    <noscript><style>.nojs {display: none;}</style></noscript>
  </head>

-  <body onload="setBackground()">
+  <body>
    <div id="background-image"></div>

+    <div id="preloader" class="nojs"><div class="spinner"><div></div></div></div>
+
    <div id="content">
      <img id="logo" src="https://cdn.enp.one/img/logos/aah-md.jpg"/>

-      <h1>AllAroundHere</h1>
+      <h1>All Around Here</h1>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
--- 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");
+});