:root {
    --colour1: #084cdf;
    --colour2: white;
    --speed: 3s;
}

.mini-loader {
    height: 10px;
    border-radius: 10px;
    width: calc(113px * 4);
    border: gray solid 1px;
    margin: 10px auto;
    box-shadow: 0px 10px 13px -6px rgba(44, 62, 80, 1);
    background-color: var(--colour2);
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 40px,
            var(--colour1) 40px,
            var(--colour1) 80px);

    animation: slide var(--speed) linear infinite;
    will-change: background-position;
}

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

    to {
        background-position-x: 113px;
    }
}


@media only screen and (max-width: 450px) {
    .mini-loader {
        width: calc(113px * 3);
    }

}

@media only screen and (max-width: 350px) {
    .mini-loader {
        width: calc(113px * 2);
    }
}