Percentage bar display with background color

Question

For example, if I have a table with two columns and two rows:

Col1       Percentage
50            50% 
70            70%

How to populate the Percentage column with a color representing the value of COl1? Something like that:

Answer 1

You can use a linear gradient with two stops one after another:

.percentageFill{
    height:30px;

    background: -webkit-linear-gradient(left, #efe3af 75%,#ffffff 75%);
    background:    -moz-linear-gradient(left, #efe3af 75%, #ffffff 75%);
    background:     -ms-linear-gradient(left, #efe3af 75%,#ffffff 75%);
    background:      -o-linear-gradient(left, #efe3af 75%,#ffffff 75%);
    background:         linear-gradient(to right, #efe3af 75%,#ffffff 75%);

    border:1px solid black;
}

<div class='percentageFill'>75%</div>

Run code

Remember that many browsers / versions require a vendor prefix for linear-gradient.

Answer 2

You can use a combination of background-imagedifferent sizes (based on your values) with a bit of Javascript / jQuery to make it dynamic.

: linear-gradient background-image not background-color. , background-size background-repeat. . . , .

, :

/* A little bit of jQuery / Javascript */

// Pick up each relevant cell, and
// Assign the text to its background-size property

$("td.percent").each(function() {
    var s = $(this).text() + ' 100%';
    // This will get 's' as 'n% 100%'. We have to only change the width, 
    // height remains 100%. We assign this 's' to the css.
    $(this).css({"background-size": s});
});

/* CSS */

* { box-sizing: border-box; }
table {
    table-layout: fixed;
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
}
col.small { width: 30%; }
col.big { width: 70%; }
th, td {
    border: 1px solid #ccc;
    border-collapse: collapse;
    padding: 4px;
}

/* this is the style which does the work */
td.percent {
    text-align: center;
    background-color: #eee;
    /* dummy gradient with same from and to colours */
    /* you can use any gradient to jazz it up */
    background-image: linear-gradient(to right, #3399dd, #3399dd);
    /* because gradients are images, we can use background-size property */
    background-size: 1% 100%;         /* initial width of 1% and height 100%*/
    background-repeat: no-repeat;     /* this is important to restrict the gradient */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Your table with second column containing percent values -->

<table>
    <col class="small" /><col class="big" />
    <thead><tr><th>Title</th><th>Value</th></tr></thead>
    <tbody>
        <tr><td>One</td><td class="percent">65%</td></tr>
        <tr><td>Two</td><td class="percent">90%</td></tr>
        <tr><td>Three</td><td class="percent">20%</td></tr>
    </tbody>
</table>

, : http://jsfiddle.net/abhitalks/xh734aej/2/

---

, attr CSS, width .., content. CSS Javascript.

: http://www.w3.org/TR/css3-values/#attr-value

.

Answer 3

Following George's answer, I created a function in javascript (jQuery required) for a dynamic style. If you set the third parameter to the setFill function, you also have a color palette applied in the background.

Hope can be helpful.

/**
 * Fill the CSS Background programmatically.
 * 
 * @param String el The element selector
 * @param int perc
 * @param bool use_color
 * @returns void
 */
function setFill(el, perc, use_color) {

  var color;

  if (use_color !== true) {
    color = '#f5f5f5';
  } else {
    if (perc < 20) {
      color = '#F8D7CF';
    } else if (perc < 40) {
      color = '#FCE5D3';
    } else if (perc < 60) {
      color = '#F9EED6';
    } else if (perc < 80) {
      color = '#C4E4E0';
    } else if (perc <= 100) {
      color = '#C3CCD0';
    }
  }

  $(el)
    .css('background', '-webkit-linear-gradient(right, ' + color + ' ' + perc + '%,#ffffff ' + perc + '%)')
    .css('background', '-moz-linear-gradient(right, ' + color + ' ' + perc + '%,#ffffff ' + perc + '%)')
    .css('background', '-ms-linear-gradient(right, ' + color + ' ' + perc + '%,#ffffff ' + perc + '%)')
    .css('background', '-o-linear-gradient(right, ' + color + ' ' + perc + '%,#ffffff ' + perc + '%)')
    .css('background', 'linear-gradient(to left, ' + color + ' ' + perc + '%,#ffffff ' + perc + '%)');
}

$('.percentageFill').each(function(i, e){ 
  setFill(e, $(e).data('percentage'), true); 
});

.percentageFill{
    height:30px;
    border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='percentageFill' data-percentage="5">5%</div>
<div class='percentageFill' data-percentage="30">30%</div>
<div class='percentageFill' data-percentage="55">55%</div>
<div class='percentageFill' data-percentage="70">70%</div>
<div class='percentageFill' data-percentage="98">98%</div>

Run code