Updated styling

2021-05-09 15:36:48 +02:00
parent 7beb5c29b2
commit a711e0d148
6 changed files with 788 additions and 40 deletions
--- a/out/css/loader.css
+++ b/out/css/loader.css
@ -0,0 +1,310 @@
+/* Variables */
+* {
+    --loaderDivCol: var(--color-loader-text);
+
+    --circR: 1rem;
+    --circD: 2rem;
+    --circ6D: 12rem;
+
+    --timing: ease-in-out;
+    --fullCycle: 5s;
+}
+
+.loader.hidden {
+    display: none;
+}
+
+.loader {
+    position: relative;
+
+    box-sizing: border-box;
+    height: var(--circD);
+    width: var(--circ6D);
+
+    margin: calc(var(--circD) * 3) var(--circD);
+    padding: var(--circR) 0;
+}
+
+.loader > * {
+    position: absolute;
+    box-sizing: border-box;
+    height: 0;
+    width: calc(2 * var(--circD));
+    opacity: 0;
+
+    display: flex;
+    justify-content: space-between;
+
+    --keyframe-sequence: "loading0";
+    --delay: 0;
+    --animation: var(--keyframe-sequence) var(--fullCycle) var(--timing) calc(0s - var(--fullCycle) * (1 - (var(--delay)) / 8) ) infinite;
+
+    -webkit-animation: var(--animation);
+    -moz-animation: var(--animation);
+    -ms-animation: var(--animation);
+    -o-animation: var(--animation);
+    animation: var(--animation);
+}
+
+.loader div::before,
+.loader div::after {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    width:  var(--circD);
+    height: var(--circD);
+    border: 1px solid var(--loaderDivCol);
+    background: var(--loaderDivCol);
+    border-radius: 100%;
+
+    position: absolute;
+    top: calc(0px - var(--circR));
+}
+
+.loader div::before {
+    left: calc(0px - var(--circR));
+}
+.loader div::after {
+    right: calc(0px - var(--circR));
+}
+
+
+@keyframes loading0 {
+    0% {
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    12.52% {
+        opacity: 1;
+    }
+    12.56% {
+        opacity: 0;
+    }
+    99.7% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes loading2 {
+    0% {
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    7% {
+        transform: rotate(180deg);
+    }
+
+    12.47% {
+        opacity: 1;
+    }
+    12.56% {
+        opacity: 0;
+    }
+
+    24.6% {
+        opacity: 0;
+    }
+    24.97% {
+        opacity: 1;
+    }
+    37.52% {
+        opacity: 1;
+    }
+    37.57% {
+        opacity: 0;
+        transform: rotate(180deg);
+    }
+
+    99.95% {
+        opacity: 0;
+        transform: rotate(0deg);
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes loading3 {
+    0% {
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    7% {
+        transform: rotate(180deg);
+    }
+
+    12.47% {
+        opacity: 1;
+    }
+    12.52% {
+        opacity: 1;
+    }
+    12.56% {
+        opacity: 0;
+    }
+
+    37.4% {
+        opacity: 0;
+    }
+    37.47% {
+        opacity: 1;
+    }
+    50.02% {
+        opacity: 1;
+    }
+    50.1% {
+        opacity: 0;
+        transform: rotate(180deg);
+    }
+    99.8% {
+        opacity: 0;
+        transform: rotate(0deg);
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes loading5 {
+    0% {
+        opacity: 1;
+        transform: rotate(0deg);
+    }
+    7% {
+        transform: rotate(180deg);
+    }
+
+    12.47% {
+        opacity: 1;
+    }
+    12.52% {
+        opacity: 1;
+    }
+    12.58% {
+        opacity: 0;
+    }
+
+    62.4% {
+        opacity: 0;
+    }
+    62.47% {
+        opacity: 1;
+    }
+    75.02% {
+        opacity: 1;
+    }
+    75.1% {
+        opacity: 0;
+        transform: rotate(180deg);
+    }
+    99.7% {
+        transform: rotate(0deg);
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+        transform: rotate(0deg);
+    }
+}
+
+@keyframes loading6 {
+    0% {
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    7% {
+        transform: rotate(180deg);
+    }
+
+    12.47% {
+        opacity: 1;
+    }
+    12.52% {
+        opacity: 1;
+    }
+    12.57% {
+        opacity: 0;
+    }
+
+    74.85% {
+        opacity: 0;
+    }
+    74.97% {
+        opacity: 1;
+    }
+    87.52% {
+        opacity: 1;
+    }
+    87.6% {
+        opacity: 0;
+        transform: rotate(180deg);
+    }
+    99.8% {
+        opacity: 0;
+        transform: rotate(0deg);
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.loader :nth-child(1) {
+    width: 66.66%;
+    --keyframe-sequence: "loading5";
+    --delay: 0;
+}
+.loader :nth-child(2) {
+    width: 66.66%;
+    margin-left: 0;
+    --keyframe-sequence: "loading2";
+    --delay: 0;
+}
+.loader :nth-child(3) {
+    width: 33.33%;
+    margin-left: 33.33%;
+    --keyframe-sequence: "loading2";
+    --delay: 1;
+}
+.loader :nth-child(4) {
+    width: 66.66%;
+    margin-left: 33.33%;
+    --keyframe-sequence: "loading6";
+    --delay: 2;
+}
+
+.loader :nth-child(5) {
+    width: 100%;
+    --keyframe-sequence: "loading6";
+    --delay: 3;
+}
+.loader :nth-child(6) {
+    width: 100%;
+    --keyframe-sequence: "loading3";
+    --delay: 3;
+}
+.loader :nth-child(7) {
+    width: 33.33%;
+    --keyframe-sequence: "loading3";
+    --delay: 4;
+}
+.loader :nth-child(8) {
+    width: 66.66%;
+    margin-left: 33.33%;
+    --keyframe-sequence: "loading3";
+    --delay: 5;
+}
+.loader :nth-child(9) {
+    width: 33.33%;
+    margin-left: 33.33%;
+    --keyframe-sequence: "loading5";
+    --delay: 6;
+}
+.loader :nth-child(10) {
+    width: 33.33%;
+    margin-left: 66.66%;
+    --keyframe-sequence: "loading5";
+    --delay: 7;
+}