progress {
    opacity: 0;
}

.progress-container {
    position: relative;
    color:transparent;
    background: var(--light-back);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

    .progress-container::before {
        content: "0";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        background: var(--primary);
        animation: progress-html 15s linear forwards;
    }

.progress-label {
    position: relative;
}

@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.progress-label::after {
    counter-reset: num var(--num);
    content: counter(num) "%";
    position: absolute;
    top: 0;
    right: 0;
}

@keyframes progress-html {
    to {
        width: 100%;
    }
}

@keyframes progress-text-html {
    to {
        --num: 100;
    }
}