Displaying percentage bar with background color

问题

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

Col1       Percentage
50            50% 
70            70%

How do I fill the Percentage column with color represent the value of COl1 ? Something like this :

回答1:

You can use a linear gradient with two stops immediately following one 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>

Remember many browser(s)/versions require a vendor prefix for linear-gradient.

回答2:

You could use a combination of background-image of varying size (based on your values) with a little bit of Javascript / jQuery to make it dynamic.

Note: linear-gradient is actually a background-image not background-color. So, we can leverage the background-size and background-repeat properties on it. In the below example, I have used a dummy gradient with same from and to colours. This gives it a simple flat look. You can have complex gradient to jazz up the bar.

Run the below snippet to view a demo:

/* 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>

Also a fiddle, if you want to check out different percent values with it: http://jsfiddle.net/abhitalks/xh734aej/2/

There is a recommendation which when implemented will allow attr on other CSS properties like width etc. apart from content. This will then allow making the stop sizes dynamically only using CSS without Javascript.

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

回答3:

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

Hope can be useful.

/**
 * 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>

来源：https://stackoverflow.com/questions/26800577/displaying-percentage-bar-with-background-color

标签

html

css

styling