Progress bar with css

Question

Progress bar with css

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (0 votes)

1

I'm trying to set up a progress bar with css, and the progress value is 13.20%. The problem is that it's getting a gradient effect, and I want it to change from one color to another.

.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>

html css css3

asked by anonymous 28.07.2017 / 19:04

3 answers

3

You probably have a better way to do this, but one of the ways to do that, based on your code, is to place the gradient without transition between one color and another:

.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>

28.07.2017 / 19:13

0

As that friends showed by css. If you want you have the option to boot.

Basic Progress Bar

13.20% Complete

30.07.2017 / 16:08

How to model the products table for an e-commerce? Which HTML attribute can not be modified?

score 3 · Accepted Answer

Friend, html5 has an option for this

*,*: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>