body{
    -webkit-user-select: none !important; /* Safari */
    -ms-user-select: none !important;; /* IE 10 and IE 11 */
    user-select: none !important;; /* Standard syntax */
}
#loading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* HTML: <div class="loader"></div> */
.loader {
    cursor: wait;
    width: 90px;
    height: 14px;
    box-shadow: 0 3px 0 #fff;
    position: relative;
    clip-path: inset(-40px 0 -5px)
}
.loader:before {
    content: "";
    position: absolute;
    inset: auto calc(50% - 17px) 0;
    height: 50px;
    --g:no-repeat linear-gradient(#ccc 0 0);
    background: var(--g),var(--g),var(--g),var(--g);
    background-size: 16px 14px;
    animation:
        l7-1 2s infinite linear,
        l7-2 2s infinite linear;
}
@keyframes l7-1 {
    0%,
    100%  {background-position: 0 -50px,100% -50px}
    17.5% {background-position: 0 100%,100% -50px,0 -50px,100% -50px}
    35%   {background-position: 0 100%,100% 100% ,0 -50px,100% -50px}
    52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - 16px),100% -50px}
    70%,
    98%  {background-position: 0 100%,100% 100% ,0 calc(100% - 16px),100% calc(100% - 16px)}
}
@keyframes l7-2 {
    0%,70% {transform:translate(0)}
    100%  {transform:translate(200%)}
}