.progressbar {      
    --duration: 5s;
    color-scheme: light dark;
    color: light-dark(#333, #f8f8f8);
    background-color: light-dark(#ddd, #333);
    font-family: sans-serif;
    font-size: 1em;
    padding: 0;
    margin: 0;
    line-height: 1em;
    margin: .5em 0;
    input[type="checkbox"] {
        display: none;
    }
    input[type="checkbox"]:checked + label:after{ 
        width: 0;
        transition: width var(--duration) linear;
    }
    label:after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: light-dark(#ccc, #999);
        display: block;
        width: 100%;
        height: 10px;
        transition: width 400ms linear;
    }
    label {
        text-indent: 5px;
        padding: 5px 0 15px 0;
        position: relative;
        display: block;
        background: linear-gradient(to right, green 50%, yellow 80%, red);
        overflow: hidden;
        background-size: 100% 10px;
        background-position: left bottom;
        background-repeat: no-repeat;
        width: 100%;
    }
}