.preloader-dark {
    --bgcolor: #121212;
    --color: #dedede;
}
.preloader-light {
    --bgcolor: #fff;
    --color: #363636;
}
.preloader {
    --width: 400px;
    --height: 20px;
    --speed: 500;
    --stripeColor1: color-mix(in srgb, var(--color), var(--bgcolor) 0%);
    --stripeColor2: color-mix(in srgb, var(--color), var(--bgcolor) 50%);

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bgcolor, white);
}

.preloader-container {
    width: calc(var(--width) + 8px);
    border: 2px solid var(--color, black);
    border-radius: 8px;
    padding: 2px;
}
.preloader-progressbar-container {
    width: 0;
    overflow: hidden;
    border-radius: 4px;
}
.preloader-progressbar {
    width: calc(20px * 20);
    height: var(--height);
    transition: width 0.3s;
    background-color: var(--colour2, black);
    background-size: 20px 20px;
    background-image: repeating-linear-gradient(-45deg, var(--stripeColor1) 0, var(--stripeColor1) 25%, var(--stripeColor2) 25%, var(--stripeColor2) 50%);
    animation: slide calc(var(--speed) * 1ms) linear infinite;
    will-change: background-position;
}

@keyframes slide {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: 20px;
    }
}