Como fazer este efeito no texto dentro da barra de progresso em que o texto muda de cor de acordo com preenchimento da barra, e quando a barra alcança o texto, somente uma parte do texto muda de cor?
Veja que quando está em 50% metade da cor do texto fica branca em contraste com o fundo preto e a outra metade preta em contraste com o fundo branco. Quando o fundo abaixo do texto for branco, o texto é totalmente preto e vice-versa.
Como fazer isso usando CSS e JavaScript para a barra ir de 0% a 100% num determinado período de tempo, digamos, em 10 segundos?
O código da barra seria este abaixo, mas pode se alterado à vontade para que se possa conseguir o efeito desejado:
#barra{
display: block;
width: 298px;
height: 28px;
line-height: 28px;
text-align: center;
color: #000;
border: 1px solid #000;
position: relative;
}
#progresso{
display: block;
width: 15%;
height: 100%;
background: #000;
position: absolute;
top: 0;
left: 0;
}
<div id="barra">
<div id="progresso">
</div>
<strong>15%</strong>
</div>