From 78ebe5012d4158adbfa3f96055d1e2937c1095c4 Mon Sep 17 00:00:00 2001
From: Jonas Leder <git@jonasled.de>
Date: Sun, 18 Apr 2021 22:29:51 +0200
Subject: [PATCH] show loading animation while page is loading
---
js/externalLinkHandler.js | 4 ++-
js/loader.js | 11 +++++++
js/script.js | 1 +
scss/_loader.scss | 61 +++++++++++++++++++++++++++++++++++++++
scss/style.scss | 1 +
5 files changed, 77 insertions(+), 1 deletion(-)
create mode 100644 js/loader.js
create mode 100644 scss/_loader.scss
diff --git a/js/externalLinkHandler.js b/js/externalLinkHandler.js
index 0feee1b..183b669 100644
--- a/js/externalLinkHandler.js
+++ b/js/externalLinkHandler.js
@@ -5,5 +5,7 @@ document.onreadystatechange = function () {
console.log(href);
element.target = "_blank";
}
- })
+ });
+
+ document.querySelector(".loader").style.display = "none";
}
\ No newline at end of file
diff --git a/js/loader.js b/js/loader.js
new file mode 100644
index 0000000..337977b
--- /dev/null
+++ b/js/loader.js
@@ -0,0 +1,11 @@
+let div = document.createElement("div");
+div.className = "loader";
+div.innerHTML = `<div class="loader-dots">
+ <div class="dots"></div>
+ <div class="dots"></div>
+ <div class="dots"></div>
+ <div class="dots"></div>
+ <div class="dots"></div>
+</div>`;
+
+document.body.appendChild(div);
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index dccfa63..8b4271f 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,3 +1,4 @@
+require("./loader");
require("./browserCheck");
require("./error");
diff --git a/scss/_loader.scss b/scss/_loader.scss
new file mode 100644
index 0000000..b76e566
--- /dev/null
+++ b/scss/_loader.scss
@@ -0,0 +1,61 @@
+.loader {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ transition: visibility 0s, opacity 0.5s linear;
+ background-color: $back-color;
+
+ .loader-dots {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+
+ .dots {
+ position: absolute;
+ padding: 10px;
+ border-radius: 50%;
+ background: $accent-color;
+ -webkit-animation: loader 1s ease-in-out 0s infinite;
+ animation: loader 1s ease-in-out 0s infinite;
+
+ &:nth-child(1) {
+ -webkit-animation-delay: 0s;
+ animation-delay: 0s;
+ }
+
+ &:nth-child(2) {
+ -webkit-animation-delay: 0.15s;
+ animation-delay: 0.15s;
+ }
+
+ &:nth-child(3) {
+ -webkit-animation-delay: 0.30s;
+ animation-delay: 0.30s;
+ }
+
+ &:nth-child(4) {
+ -webkit-animation-delay: 0.45s;
+ animation-delay: 0.45s;
+ }
+ }
+
+ }
+}
+
+@keyframes loader {
+ 0% {
+ -webkit-transform: translateX(-100px);
+ transform: translateX(-100px);
+ opacity: 0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateX(100px);
+ transform: translateX(100px);
+ opacity: 0;
+ }
+}
\ No newline at end of file
diff --git a/scss/style.scss b/scss/style.scss
index 4f6d62c..8ba928f 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -1,5 +1,6 @@
@import "var";
@import "colorMixer";
+@import "loader";
@import "general";
@import "menue";
@import "normalize";
--
GitLab