update

leuffen · Oct 13, 2023 · 001b2d7 · 001b2d7
1 parent a2e764f
commit 001b2d7
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@leuffen/liscom-loader",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

diff --git a/src/loader/_loader.scss b/src/loader/_loader.scss
@@ -1,98 +1,107 @@
-body > .loader > .loader-bar {
-    position: relative;
-    display: block;
-    background-color: lightgrey;
-    height: 3px;
-    width: 70vw;
-    max-width: 500px;
-    top: 0;
-    z-index: 1;
-    margin-top: 25vh;
-    &::before {
-        content: "";
-        font-family: sans-serif;
-        font-size: 12px;
-        line-height: 10px;
-        position: relative;
-        text-align: center;
-        color: white;
-
-        z-index: 2;
-        -webkit-animation: leu--site-loader 60s ease-out;
-        animation: leu--site-loader 30s ease-out;
-        display: block;
-        background-color: indianred;
-        height: 100%;
-        width: 35%;
-        top: 0;
-    }
-}
 
 
 @keyframes leu--site-loader {
-    3% {
-        width: 75%;
+  3% {
+    width: 75%;
 
-    }
-    5% {
-        width: 90%;
-    }
-    10% {
-        width: 95%;
-    }
-    100% {
-        width: 100%;
-    }
+  }
+  5% {
+    width: 90%;
+  }
+  10% {
+    width: 95%;
+  }
+  100% {
+    width: 100%;
+  }
 }
 
 
 body {
-    min-height: 5000vh; // 3000vh is enough to make sure the page scrolls to correct position on reload
-}
+  min-height: 5000vh; // 3000vh is enough to make sure the page scrolls to correct position on reload
 
-body.loaded {
-    min-height: unset;
-}
-
-body > joda-content {
+  & > joda-content {
     opacity: 0;
     transition: opacity 0.10s;
+  }
+
+  &.loaded {
+    min-height: unset;
+    & > joda-content {
+      opacity: 1;
+    }
+  }
 }
-body.loaded > joda-content {
-    opacity: 1;
-}
+
 
 
 body > .loader {
-    position: fixed;
-    z-index: -99;
+
+  position: fixed;
+  z-index: 99;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  transition: opacity 0.15s;
+  display: flex !important;
+
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  opacity: 1;
+  flex-wrap: wrap;
+  flex-direction: column;
+
+  & > .loader-bar {
+    position: relative;
+    display: block;
+    background-color: lightgrey;
+    height: 4px;
+    width: 70vw;
+    max-width: 700px;
     top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #fff;
-    transition: opacity 0.15s;
-    display: flex !important;
-
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-    opacity: 1;
-    flex-wrap: wrap;
-    flex-direction: column;
+    z-index: 1;
+    margin-top: 15vh;
 
+    &::before {
+      content: "";
+      font-family: sans-serif;
+      font-size: 12px;
+      line-height: 10px;
+      position: relative;
+      text-align: center;
+      color: white;
+
+      z-index: 99;
+      -webkit-animation: leu--site-loader 60s ease-out;
+      animation: leu--site-loader 30s ease-out;
+      display: block;
+      background-color: indianred;
+      height: 100%;
+      width: 35%;
+      top: 0;
+    }
+  }
+
+  & > .loader-img {
     & > img {
-        flex-direction: column;
-        display: block !important;
-        height: auto !important;
-        width: 70vw !important;
-        max-width: 500px;
+      flex-direction: column;
+      display: block !important;
+      height: auto !important;
+      min-width: 150px;
+      width: 15vw;
+      max-width: 550px !important;
+
 
     }
+  }
+
 }
 
 body.loaded > .loader {
-    opacity: 0;
-    //display: none !important;
-    z-index: -99;
+  opacity: 0;
+  //display: none !important;
+  z-index: -99;
 }
diff --git a/src/loader/loader.ts b/src/loader/loader.ts
@@ -1,3 +1,4 @@
+import {ka_create_element} from "@kasimirjs/embed";
 
 const indexName = "liscom_hit_index";
 let state = sessionStorage.getItem(indexName);
@@ -6,7 +7,7 @@ if (state === null) {
 }
 sessionStorage.setItem(indexName, "" + (parseInt(sessionStorage.getItem(indexName) ?? "0") + 1));
 
-export const hitIndex = parseInt(sessionStorage.getItem(indexName) ?? "0");
+export const hitIndex =  1; //parseInt(sessionStorage.getItem(indexName) ?? "0");
 
 export function initLoader() {
     let interval = setInterval(() => {
@@ -16,15 +17,13 @@ export function initLoader() {
             clearInterval(interval);
 
             let img = document.querySelector("img").cloneNode(true) as HTMLImageElement;
-            let loader = document.createElement("div");
-            loader.classList.add("loader");
-            loader.appendChild(img);
+            let loader = ka_create_element("div", {class: "loader"});
+            let loaderImg =  ka_create_element("div", {class: "loader-img"}, [img], loader);
             img.setAttribute("class", "");
             img.setAttribute("loading", "eager");
 
-            let loaderBar = document.createElement("div");
-            loaderBar.classList.add("loader-bar");
-            loader.appendChild(loaderBar);
+            let loaderBar = ka_create_element("div", {class: "loader-bar"}, [], loader)
+
 
             document.querySelector("body").appendChild(loader);
         }