Pseudo progressbar

Ik heb straks een aantal pagina's welke waarschijnlijk wat tijd in beslag zullen nemen.
Om gebruikers een indruk te geven dat er wel wat gebeurd wil ik een progressbar op die pagina's plaatsen.
Deze code is te vinden op het net

<div class="w3-light-grey" >
    <div class="w3-red" style="height:24px;width:1%"><p style="text-align: center;">voortgang 1%</p></div>
</div>

Dit plaatst ee lichtgrijze balk met daar overheen een rode balk. Nu wil ik de balk in het midden van de pagina plaatsen dus daarom het geheel een div in het midden van de pagina, jammer dan

<div id="progressbar">
    <div class="w3-light-grey" id="base">
        <div class="w3-red" id="barr" style="height:24px;width:1%"><p id="base">voortgang 1%</p></div>
    </div>
</div>

en de CSS

#progressbar {
    height: 50px;
    width: :800px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

De testpagina vindt men hier. DE balk staat wel mooi in het midden maar is geen 800px lang. Wat zie ik hier over het hoofd?