.progress {
    --progress: 0%;
    height: 50px;
    margin: 2em auto;
    border: 1px solid #fff;
    padding: 12px 10px;
    box-shadow: 0 0 10px #aaa;
}

.progress .bar {
    width: var(--progress);
    text-align: center;
    height: 100%;
    background: linear-gradient(gold, #c85, gold);
    background-repeat: repeat;
    box-shadow: 0 0 10px 0px orange;
    animation: shine 4s ease-in infinite,
    end 1s ease-out 1 30s;
}

.progress .bar .timer_seconds{
    color: black;
    font-weight: bold;
}

a.action_save_link{
    text-decoration: underline !important;
    cursor: pointer;
    color: red !important;
}

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

@keyframes shine {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 50px;
    }
}

@keyframes end {
    0%, 100% {
        box-shadow: 0 0 10px 0px orange;
    }
    50% {
        box-shadow: 0 0 15px 5px orange;
    }
}