.loader {
    display: block;
    position: relative;
    height: 32px;
    /*width: 200px;*/
    background: #fff;
    border: 2px solid #fff;
    color: rgb(223, 60, 60);
    overflow: hidden;
}

    .loader::before {
        content: '';
        background: rgb(223, 60, 60);
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        animation: loading_302 20s linear infinite;
    }

    .loader:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 18px;
        line-height: 32px;
        color: rgb(0,255,255);
        mix-blend-mode: difference;
        animation: percentage_302 20s linear infinite;
    }

@keyframes loading_302 {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@keyframes percentage_302 {
    0% {
        content: "0%"
    }

    5% {
        content: "5%"
    }

    10% {
        content: "10%"
    }

    20% {
        content: "20%"
    }

    30% {
        content: "30%"
    }

    40% {
        content: "40%"
    }

    50% {
        content: "50%"
    }

    60% {
        content: "60%"
    }

    70% {
        content: "70%"
    }

    80% {
        content: "80%"
    }

    90% {
        content: "90%"
    }

    95% {
        content: "95%"
    }

    96% {
        content: "96%"
    }

    97% {
        content: "97%"
    }

    98% {
        content: "98%"
    }

    99% {
        content: "99%"
    }

    100% {
        content: "100%"
    }
}