.page__content {
    #progress-custom {
        --val: attr(value type(<number>));
        --max: attr(max type(<number>), 1);

        --_p: calc(100% * var(--val) / var(--max)); /* the percentage of progression */
        --_b: linear-gradient(#fff8, #fff0), repeating-linear-gradient(135deg, #0003 0 15px, #0000 0 30px),
            /* if (p < 30%) "red" */ conic-gradient(red 0 0) 0 / max(0%, 30% - var(--_p)) 1%,
            /* else if (p < 60%) "orange" */ conic-gradient(orange 0 0) 0 / max(0%, 60% - var(--_p)) 1%, /* else "green" */ green;
        appearance: none;
        border: none;
        width: 300px;
        height: 30px;
        border-radius: 99px;
        overflow: hidden;

        &::-webkit-progress-bar {
            background-color: lightgrey;
        }

        &::-webkit-progress-value {
            border-radius: 99px;
            background: var(--_b);
        }

        &::-moz-progress-bar {
            border-radius: 99px;
            background: var(--_b);
        }
    }
}

@supports not (d: attr(d type(<number>))) {
    progress[value] {
        --_b: linear-gradient(#fff8, #fff0), repeating-linear-gradient(135deg, #0003 0 15px, #0000 0 30px), green;
    }
}