Updated styling

2021-05-09 15:36:48 +02:00
parent 51d8ccf148
commit f4ad57b544
6 changed files with 788 additions and 40 deletions
--- a/out/css/roller.css
+++ b/out/css/roller.css
@ -0,0 +1,296 @@
+
+/*
+    Roller
+    */
+
+* {
+    --loaderDivCol: #eee;
+
+    --circD: 1rem;
+    --circ6D: 6rem;
+    --circR: 0.5rem;
+
+    --scrollbarBG:   #f5f5f5;
+    --thumbBG:       #C1DCEA;
+}
+
+#elm {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.roller {
+    margin: 2.5rem 0;
+}
+
+@keyframes loading0 {
+    0% {
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    7% {
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    12.47% {
+        opacity: 1;
+    }
+    12.52% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+        transform: rotate(0deg);
+    }
+}
+
+@keyframes loading2 {
+    0% {
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    7% {
+        transform: rotate(180deg);
+    }
+
+    12.47% {
+        opacity: 1;
+    }
+    12.52% {
+        opacity: 0;
+    }
+
+    24.97% {
+        opacity: 0;
+    }
+    25.02% {
+        opacity: 1;
+    }
+
+    37.47% {
+        opacity: 1;
+    }
+    37.52% {
+        opacity: 0;
+    }
+
+    99.95% {
+        transform: rotate(180deg);
+    }
+    100% {
+        opacity: 0;
+        transform: rotate(0deg);
+    }
+}
+
+@keyframes loading3 {
+    0% {
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    7% {
+        transform: rotate(180deg);
+    }
+
+    12.47% {
+        opacity: 1;
+    }
+    12.52% {
+        opacity: 0;
+    }
+
+    37.47% {
+        opacity: 0;
+    }
+    37.52% {
+        opacity: 1;
+    }
+
+    49.97% {
+        opacity: 1;
+    }
+    50.02% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
+        transform: rotate(180deg);
+    }
+}
+
+@keyframes loading5 {
+    0% {
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    7% {
+        transform: rotate(180deg);
+    }
+
+    12.47% {
+        opacity: 1;
+    }
+    12.52% {
+        opacity: 0;
+    }
+
+    62.47% {
+        opacity: 0;
+    }
+    62.52% {
+        opacity: 1;
+    }
+
+    74.97% {
+        opacity: 1;
+    }
+    75.02% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
+        transform: rotate(180deg);
+    }
+}
+
+@keyframes loading6 {
+    0% {
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    7% {
+        transform: rotate(180deg);
+    }
+
+    12.47% {
+        opacity: 1;
+    }
+    12.52% {
+        opacity: 0;
+    }
+
+    74.97% {
+        opacity: 0;
+    }
+    75.02% {
+        opacity: 1;
+    }
+
+    87.47% {
+        opacity: 1;
+    }
+    87.52% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
+        transform: rotate(180deg);
+    }
+}
+
+.loader {
+    position: relative;
+    height: var(--circD);
+    width: var(--circ6D);
+    padding: var(--circR) 0;
+    box-sizing: border-box;
+    z-index: -1;
+}
+
+
+.loader :nth-child(n) {
+    position: absolute;
+    opacity: 0;
+    box-sizing: border-box;
+    width: 0;
+
+    display: flex;
+    justify-content: space-between;
+}
+    
+.loader div::before,
+.loader div::after {
+    content: "";
+    display: block;
+    width: var(--circD);
+    height: var(--circD);
+    border: 1px solid var(--loaderDivCol);
+    background: var(--loaderDivCol);
+    border-radius: 100%;
+
+    position: absolute;
+    top: var(--circR);
+}
+    
+.loader div::before {
+    left: calc(-var(--circR));
+}
+.loader div::after {
+    right: calc(-var(--circR));
+}
+
+
+.loader :nth-child(1) {
+    width: 66.66%;
+    /*^{animation "loading5" (timeDiv 0)}*/
+
+    --timing: "cubic-bezier(.39,.58,.57,1)";
+    --fullCycle: "4s";
+    --animation: "loading5" var(--fullCycle) var(--timing) calc(-(var(--fullCycle) * 1 / 8 )) infinite;
+    -webkit-animation: var(--animation);
+    -moz-animation: var(--animation);
+    -ms-animation: var(--animation);
+    -o-animation: var(--animation);
+    animation: var(--animation);
+
+    /*- fromInteger fullDiv * (1 - (fromInteger a) / 8 )*/
+}
+.loader :nth-child(2) {
+    width: 66.66%;
+    margin-left: 0;
+    /*^{animation "loading2"  (timeDiv 0)}*/
+}
+.loader :nth-child(3) {
+    width: 33.33%
+    margin-left: 33.33%
+    /*^{animation "loading2" (timeDiv 1)}*/
+}
+.loader :nth-child(4) {
+    width: 66.66%
+    margin-left: 33.33%
+    /*^{animation "loading6" (timeDiv 2)}*/
+}
+
+
+.loader :nth-child(5) {
+    width: 100%
+    /*^{animation "loading6" (timeDiv 3)} */
+}
+.loader :nth-child(6) {
+    width: 100%
+    /*^{animation "loading3" (timeDiv 3)}*/
+}
+.loader :nth-child(7) {
+    width: 33.33%
+    /*^{animation "loading3" (timeDiv 4)}*/
+}
+.loader :nth-child(8) {
+    width: 66.66%
+    margin-left: 33.33%
+    /*^{animation "loading3" (timeDiv 5)}*/
+}
+.loader :nth-child(9) {
+    width: 33.33%
+    margin-left: 33.33%
+    /*^{animation "loading5" (timeDiv 6)}*/
+}
+.loader :nth-child(10) {
+    width: 33.33%
+    margin-left: 66.66%
+    /*^{animation "loading5" (timeDiv 7)} */
+}