Элемент <progress>в центрированных элементах <div>заставляет индикатор выполнения заполняться из центра.Как я могу заставить его течь слева направо?

Question

Я пытаюсь создать пользовательский элемент HTML, в котором есть таймер. в элементе есть элемент с его выравниванием, установленным в центр. Текст выравнивается правильно, но элемент заполняется из центра наружу, а не слева направо, когда я пытаюсь изменить его стиль CSS.

Изображения

TestElement.js:

class TestElem extends HTMLElement
{
    connectedCallback()
    {
        var timeLeft = 60;

        var divNode = document.createElement("div");
        divNode.align = "center";

        var h1Node = document.createElement("h1");
        h1Node.innerHTML = "Laundry";
        h1Node.id = "Label";
        divNode.appendChild(h1Node);

        var h2Node = document.createElement("h2");
        h2Node.innerHTML = "0:00:00";
        h2Node.id = "TimerText";
        divNode.appendChild(h2Node);

        var progressNode = document.createElement("progress");
        progressNode.max = timeLeft;
        progressNode.value = timeLeft;
        progressNode.id = "ProgressBar";

        divNode.appendChild(progressNode);

        this.appendChild(divNode);

        this.timer = setInterval(() =>
        {
            //Code messing with setting hours, minutes, seconds
       }, 1000);
    }
}
customElements.define("test-elem", TestElem);

stylesheet.css

#ProgressBar[value]
{
    display: inline-block;
    background-color: #f3f3f3;
    border: none;
    height: 18px;
    border-radius: 9px;
}

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

#ProgressBar[value]::-webkit-progress-value
{
    background-color: #46CBDA;

    background-image:
    -webkit-linear-gradient(-45deg,
                       transparent 33%, rgba(0, 0, 0, .1) 33%,
                       rgba(0,0, 0, .1) 66%, transparent 66%),
    -webkit-linear-gradient(top,
                       rgba(255, 255, 255, .25),
                       rgba(0, 0, 0, .25)),
    -webkit-linear-gradient(left, #46CBDA, #46CBDA);

    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius: 9px;
}

Я ожидаю, что элемент будет заполнен слева направо, фактические результаты состоят в том, что элемент заполняется из центра наружу.