Personalizar barra de progresso

Qual é minha questão:
Ola, gostaria da ajuda do forum para modificar o modelo da barra de progresso deste codigo, quero que se possivel fique como na imagem:

o código é esse:

<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<script type="text/javascript" language="javascript">
function progressBarSim(al) {
var bar = document.getElementById('progressBar');
var status = document.getElementById('status');
status.innerHTML = al+"%";
bar.value = al;
al++;
var sim = setTimeout("progressBarSim("+al+")",300);
if(al == 100){
status.innerHTML = "100%";
bar.value = 100;
clearTimeout(sim);
var finalMessage = document.getElementById('finalMessage');
finalMessage.innerHTML = "Process is complete";
}
}
var amountLoaded = 0;
progressBarSim(amountLoaded);
</script>

Obrigado!!!!!!!!

Endereço do meu fórum:
https://ajuda.forumeiros.com

Versão do fórum:
PHPBB3

Olá!

Poderia nos enviar o link de onde está essa barra?

Melhores cumprimentos.