4 barras de progresso CSS que você pode usar em seu site

corpo {
fonte: 13px/20px "Lucida Grande", Tahoma, Verdana, sem serifa;
cor: #404040;
fundo: #2a2a2a;
}

.recipiente {
margem: 60px automático;
largura: 400px;
alinhamento de texto: centro;
}

.recipiente.progresso {
margem: 0 automático;
largura: 400px;
}

.progresso {
preenchimento: 4px;
fundo: rgba(0, 0, 0, 0.25);
raio da borda: 6px;
-webkit-box-shadow: inserir 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
Sombra da caixa: inserir 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.Barra de progresso {
altura: 16px;
raio da borda: 4px;
imagem de fundo: -webkit-linear-gradient(topo, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
imagem de fundo: -moz-linear-gradient(topo, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
imagem de fundo: -o-linear-gradiente(topo, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
imagem de fundo: Gradiente linear(parainferior

, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-transição do webkit: 0.4slinear;
-moz-transição: 0.4slinear;
-o-transição: 0.4slinear;
transição: 0.4slinear;
-webkit-transition-property: largura, cor de fundo;
-moz-transição-propriedade: largura, cor de fundo;
-o-transição-propriedade: largura, cor de fundo;
propriedade de transição: largura, cor de fundo;
-webkit-box-shadow: 0 0 1px 1pxrgba(0, 0, 0, 0.25), inserir 0 1pxrgba(255, 255, 255, 0.1);
Sombra da caixa: 0 0 1px 1pxrgba(0, 0, 0, 0.25), inserir 0 1pxrgba(255, 255, 255, 0.1);
}

#cinco:verificado ~ .progresso > .Barra de progresso {
largura: 5%;
cor de fundo: #f63a0f;
}

#vinte e cinco:verificado ~ .progresso > .Barra de progresso {
largura: 25%;
cor de fundo: #f27011;
}

#cinquenta:verificado ~ .progresso > .Barra de progresso {
largura: 50%;
cor de fundo: #f2b01e;
}

#setenta e cinco:verificado ~ .progresso > .Barra de progresso {
largura: 75%;
cor de fundo: #f2d31b;
}

#cem:verificado ~ .progresso > .Barra de progresso {
largura: 100%;
cor de fundo: #86e01e;
}

.rádio {
Mostrar nenhum;
}

.rótulo {
exibição: bloco em linha;
margem: 0 5px 20px;
preenchimento: 3px 8px;
cor: #aaa;
text-shadow: 0 1px preto;
raio da borda: 3px;
cursor: ponteiro;
}