1

Bom estou tentando montar uma barra de progresso com css, sendo que o valor do progresso é de 13.20% O problema é que esta ficando um em efeito degradê, e quero que mude de uma cor para outra.

.notification {
padding: 15px;
    color:#FFFFFF;
    font-style: italic;
    text-align: center;
    background:#F65314;
  background: -moz-linear-gradient(left, #F65314 13.20%, #000 86.80%);
  background: -webkit-linear-gradient(left, #F65314 13.20%, #000 86.80%);
  background: linear-gradient(left, #F65314 13.20%, #000 86.80%);
}
<div class="notification">
  erwerwerwrwrwerw
</div>

2
  • Esse linear-gradient está chamando o efeito degradê, não? Commented 28/07/2017 às 17:05
  • Sim, usei ele para dar um exemplo do que eu quero fazer. Você sabe uma forma melhor de fazer essa barrinha? Commented 28/07/2017 às 17:07

3 Respostas 3

3

Amigo, o html5 possui uma opção para isso

*,*:before, *:after{
  box-sizing: border-box

}

body{
background: silver;
}

.progress{
  width: 100%;
  height: 20px;
  background: black;
}

.progress .status{
  background: white;
  float: left;
  height: 100%;
  padding-left: 5px;
  font-size: 12px;
  line-height: 1.8
}
<progress value="22" max="100"></progress>

<!-- Maneira com CSS e HTML -->

<div class="progress">
    <div class="status" style="width: 30%">30%</status>
  </div>

1
  • Muito bom, obrigado. Commented 28/07/2017 às 17:19
3

Provavelmente tem uma maneira melhor de fazer isso, mas uma das maneiras de fazer, pegando em base o seu código, é colocar o degradê sem transição entre uma cor e outra:

.notification {
padding: 15px;
    color:#FFFFFF;
    font-style: italic;
    text-align: center;
    background:#F65314;
  background: -webkit-linear-gradient(left, #F65314 13.20%, #000 13.20%);
}
<div class="notification">
  Carregando
</div>

0

Como que os amigos mostrou pelo css. Se quiser tem a opção de fazer em bootStrap.

Basic Progress Bar

13.20% Completo
2
  • <div class="container"> <h2>Basic Progress Bar</h2> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:13.20%"> <span class="sr-only">70% Complete</span> </div> </div> </div>
    – alanpn2010
    Commented 30/07/2017 às 14:08
  • desculpe sou novo aqui
    – alanpn2010
    Commented 30/07/2017 às 14:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .