Barra de carregamento que se mexe com html e css

Olá pessoal, bem, eu tenho uma novidade nada agradável para o belo sonho: Eu estou me esforçando muito na escola, além de vários problemas como cursos, empregos.. etc e terei de me ausentar um tempão e depois que eu sair dessa "crise" que estou batalhando para ter mais tempo e mais diversão e inclusive participar mais dos posts do meu blog, pois amo postar.

Deixo vocês com um simples tutorial de hoje: Barra de carregamento que se mexe com html e css

Website

46%

E como sempre, copie o código abaixo e modifique aonde está sublinhado:

<li class="upbpd">
<span style="padding-right: 10px;">Website</span>
<div style="     background: url('http://i.imgur.com/l6S5wbM.gif');
    height: 21px;
    background-size: 376px;
           width: 12%;    margin: 10px 0 -3px;
    border-radius: 5px;
    display: inline-block;">
<span style="font-weight: bold;
    text-transform: uppercase;
    padding-left: 140px;
    font-size: 16px;"></div>
<span style="padding-left: 10px;">46%</span></li>
<style>
li.upbpd {
list-style:none;
}
</style>

Dica + Itens para modificar:
Para adicionar mais campos como estes, copie de <li até /li> , cole e modifique (estará em negrito e sublinhado).

padding-right:10px;    É O ESPAÇAMENTO DO PRIMEIRO TEXTO PELA DIREITA.
width: 12%;   TAMANHO DA BARRA DE CARREGAMENTO.
padding-left:10px;    É O ESPAÇAMENTO DO SEGUNDO TEXTO PELA ESQUERDA.