/*progress bar*/
.progress {
    --progress: 0%;

    width: 500px;
    height: 20px;
    margin: 1em auto;
    border: 1px solid #fff;
    padding: 3px 10px;
    box-shadow: 0 0 10px #aaa;
}

.progress .bar {
    width: var(--progress);
    height: 100%;
    background: #25467D;
    background-repeat: repeat;
    animation:
            end 1s ease-out 1;
    transition: width 3s ease;
}

@property --progress {
    syntax: "<length>";
    initial-value: 0%;
    inherits: true;
}