body {
    margin: 0;
    padding: 0;
}

.loader-div {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000000;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.loader-div > .loader-bg {
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-color: #fff;
}
.loader-div > .loader {
    position: fixed;
    display: grid;
    place-items: center;
    width: inherit;
    height: inherit;
}
.loader-div > .loader svg {
    height: 75px;

}
.loader-div > .loader svg polyline {
    fill: none;
    stroke-linecap: round;
    stroke-width: 7px;
    stroke-dasharray: 89.646;

    animation-name: loader-scribble-line;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
.loader-div > .loader svg path,
.loader-div > .loader svg rect {
    animation-name: loader-letters;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
.loader-div > .loader svg path:nth-of-type(1) {animation-delay: 0ms;}
.loader-div > .loader svg path:nth-of-type(2) {animation-delay: 100ms;}
.loader-div > .loader svg path:nth-of-type(3) {animation-delay: 200ms;}
.loader-div > .loader svg path:nth-of-type(4) {animation-delay: 300ms;}
.loader-div > .loader svg path:nth-of-type(5) {animation-delay: 400ms;}
.loader-div > .loader svg path:nth-of-type(6) {animation-delay: 500ms;}
.loader-div > .loader svg path:nth-of-type(7) {animation-delay: 600ms;}
.loader-div > .loader svg path:nth-of-type(8) {animation-delay: 700ms;}
.loader-div > .loader svg path:nth-of-type(9) {animation-delay: 800ms;}
.loader-div > .loader svg path:nth-of-type(10) {animation-delay: 900ms;}
.loader-div > .loader svg rect {animation-delay: 1000ms;}



/* KEYFRAMES */
@keyframes loader-scribble-line {
    0%, 15%, 100% {
        stroke-dashoffset: 89;
    }
    60%, 70% {
        stroke-dashoffset: 0;
    }
}
@keyframes loader-letters {
    0%, 25%, 100% {
        opacity: 1;
    }
    5%, 15% {
        opacity: 0.7;
    }
}