#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity:0.8;
}

.spinner {
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-logo {
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-logo img {
    max-width: 100%;
    max-height: 100%;
}

.spinner-triangle {
    width: 0;
    height: 0;
    position: absolute;
    transform-origin: center;
    animation: chase 3s linear infinite;
}

@keyframes chase {
    0% {
        transform: rotate(-90deg) translate(70px, 0);
    }
    100% {
        transform: rotate(270deg) translate(70px, 0);
    }
}

/* 24 triangles with last one largest, no fading */
.spinner-triangle:nth-child(24) { border-left: 0.4px solid transparent; border-right: 0.4px solid transparent; border-top: 0.8px solid #1B9DF2; animation-delay: 0s; }
.spinner-triangle:nth-child(23) { border-left: 0.8px solid transparent; border-right: 0.8px solid transparent; border-top: 1.6px solid #1B9DF2; animation-delay: -0.125s; }
.spinner-triangle:nth-child(22) { border-left: 1.2px solid transparent; border-right: 1.2px solid transparent; border-top: 2.4px solid #1B9DF2; animation-delay: -0.25s; }
.spinner-triangle:nth-child(21) { border-left: 1.6px solid transparent; border-right: 1.6px solid transparent; border-top: 3.2px solid #1B9DF2; animation-delay: -0.375s; }
.spinner-triangle:nth-child(20) { border-left: 2px solid transparent; border-right: 2px solid transparent; border-top: 4px solid #1B9DF2; animation-delay: -0.5s; }
.spinner-triangle:nth-child(19) { border-left: 2.4px solid transparent; border-right: 2.4px solid transparent; border-top: 4.8px solid #1B9DF2; animation-delay: -0.625s; }
.spinner-triangle:nth-child(18) { border-left: 2.8px solid transparent; border-right: 2.8px solid transparent; border-top: 5.6px solid #1B9DF2; animation-delay: -0.75s; }
.spinner-triangle:nth-child(17) { border-left: 3.2px solid transparent; border-right: 3.2px solid transparent; border-top: 6.4px solid #1B9DF2; animation-delay: -0.875s; }
.spinner-triangle:nth-child(16) { border-left: 3.6px solid transparent; border-right: 3.6px solid transparent; border-top: 7.2px solid #1B9DF2; animation-delay: -1s; }
.spinner-triangle:nth-child(15) { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 8px solid #1B9DF2; animation-delay: -1.125s; }
.spinner-triangle:nth-child(14) { border-left: 4.4px solid transparent; border-right: 4.4px solid transparent; border-top: 8.8px solid #1B9DF2; animation-delay: -1.25s; }
.spinner-triangle:nth-child(13) { border-left: 4.8px solid transparent; border-right: 4.8px solid transparent; border-top: 9.6px solid #1B9DF2; animation-delay: -1.375s; }
.spinner-triangle:nth-child(12) { border-left: 5.2px solid transparent; border-right: 5.2px solid transparent; border-top: 10.4px solid #1B9DF2; animation-delay: -1.5s; }
.spinner-triangle:nth-child(11) { border-left: 5.6px solid transparent; border-right: 5.6px solid transparent; border-top: 11.2px solid #1B9DF2; animation-delay: -1.625s; }
.spinner-triangle:nth-child(10) { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 12px solid #1B9DF2; animation-delay: -1.75s; }
.spinner-triangle:nth-child(9) { border-left: 6.4px solid transparent; border-right: 6.4px solid transparent; border-top: 12.8px solid #1B9DF2; animation-delay: -1.875s; }
.spinner-triangle:nth-child(8) { border-left: 6.8px solid transparent; border-right: 6.8px solid transparent; border-top: 13.6px solid #1B9DF2; animation-delay: -2s; }
.spinner-triangle:nth-child(7) { border-left: 7.2px solid transparent; border-right: 7.2px solid transparent; border-top: 14.4px solid #1B9DF2; animation-delay: -2.125s; }
.spinner-triangle:nth-child(6) { border-left: 7.6px solid transparent; border-right: 7.6px solid transparent; border-top: 15.2px solid #1B9DF2; animation-delay: -2.25s; }
.spinner-triangle:nth-child(5) { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 16px solid #1B9DF2; animation-delay: -2.375s; }
.spinner-triangle:nth-child(4) { border-left: 8.4px solid transparent; border-right: 8.4px solid transparent; border-top: 16.8px solid #1B9DF2; animation-delay: -2.5s; }
.spinner-triangle:nth-child(3) { border-left: 8.8px solid transparent; border-right: 8.8px solid transparent; border-top: 17.6px solid #1B9DF2; animation-delay: -2.625s; }
.spinner-triangle:nth-child(2) { border-left: 9.2px solid transparent; border-right: 9.2px solid transparent; border-top: 18.4px solid #1B9DF2; animation-delay: -2.75s; }
.spinner-triangle:nth-child(1) { border-left: 9.6px solid transparent; border-right: 9.6px solid transparent; border-top: 19.2px solid #1B9DF2; animation-delay: -2.875s; }