How to style indeterminate progress bars?

I need progress bars on this tool I'm building, but indeterminate ones are giving me trouble. To create the usual one, I followed this guide: https://css-tricks.com/html5-progress-element/.

The default looks like this in my view:

This doesn't work with the styles of the rest, so I wanted to change it. The guide suggests to use progress:not([value]) {} to target indeterminate progress bars, but it doesn't really work. The container gets styled, but the moving bit just disappears:

What's the proper way to do this?

This is what I tried to apply:

progress:not([value]) {
    -webkit-appearance: none;
    appearance: none;
}

progress:not([value])::-webkit-progress-bar {
    background-color: #EEEEEE;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress:not([value])::-webkit-progress-value {
    background-image: -webkit-linear-gradient(
                          -45deg, transparent 33%,
                          rgba(0, 0, 0, 0.1) 33%,
                          rgba(0, 0, 0, 0.1) 66%,
                          transparent 66%),
                      -webkit-linear-gradient(
                          top, 
                          rgba(255, 255, 255, 0.25),
                          rgba(0, 0, 0, 0.25)),
                      -webkit-linear-gradient(left, #09C, #F44);
    border-radius: 2px;
    background-size: 35px 20px, 100% 100%, 100%, 100%;
}

I found this question and there's an answer, but the bit for indeterminate progress bars looks the same as what I tried to do.