.preloader {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 3px;
    background-image: repeating-linear-gradient(-45deg, rgba(var(--success-color), 0.2), rgba(var(--success-color), 0.2) 7px, rgba(var(--success-color), 0.3) 7px, rgba(var(--success-color), 0.3) 14px);
}

.preloader-bg-animation {
    animation: preloader-bg-animation 1s linear infinite;
    background-size: 150% 100%;
}

.preloader-progress {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: auto;
    background-color: #FFF;
    animation: preloader-progress-animation 3s linear forwards;
}

    .preloader-progress > div {
        width: 100%;
        height: 100%;
        background-image: repeating-linear-gradient(-45deg, rgba(var(--success-color), 0.7), rgba(var(--success-color), 0.7) 7px, rgba(var(--success-color), 0.9) 7px, rgba(var(--success-color), 0.9) 14px);
    }

@keyframes preloader-bg-animation {
    0% {
        background-position: -75px 0px;
    }

    100% {
        background-position: 0 0;
    }
}


@keyframes preloader-progress-animation {
    0% {
        width: 0%;
    }

    100% {
        width: var(--blazor-load-percentage, 0%);
    }
}