I need to make a simple indicator of the progress of the country's population bar.

I need a bar with a green progress bar for a good amount and another colored part for a bad amount, and a percentage in the middle of the bar.

Suppose the strip is 50 pixels wide and 15 pixels high. Think of a static progress bar as shown below.

enter image description here

I did this before using jquery and a background div with two additional div placed on top of it for good and bad indicators, and then a positioned div above it to display text.

However, I wonder if there is an even simpler solution with HTML5-canvas , SVG or CSS . Since this time control will be displayed in each row of a long table, the goal is to reduce the DOM , increase readability and reuse.
I know that there are libraries that do this, but I wanted to use it as a learning experience. The solution should be either not a script, or only JS, or JS with jquery.

My layout

enter image description here

1 answer 1

Here is the SVG implementation of your layout:

 $("svg.tbc").each(function(i, item) { var $item = $(item); var rate = $item.parent().find(".country").attr("rate"); $item.find(".bar").attr("width", rate); $item.find("text").text(rate); }); 
 .tbc { width: 50px; height: 15px; } .tbc .bg { fill: gold; fill-opacity: 0.5; } .tbc .bar { fill: blue; fill-opacity: 0.5; } .tbc text { font-size: 8pt; font-family: Calibri, sans-serif; font-weight: bold; fill: blue; } .country { display: inline-block; width: 200px; } .info { margin-top: 20; font-size: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Urban population rate by country </h1> <div> <div class="country" rate="57.6%">China</div> <svg class="tbc"><rect class="bg" width="100%" height="100%"/><rect class="bar" width="0%" height="100%"/><text x="50%" y="70%" text-anchor="middle">0%</text></svg> </div> <div> <div class="country" rate="32%">India</div> <svg class="tbc"><rect class="bg" width="100%" height="100%"/><rect class="bar" width="0%" height="100%"/><text x="50%" y="70%" text-anchor="middle">0%</text></svg> </div> <div> <div class="country" rate="82.1%">US</div> <svg class="tbc"><rect class="bg" width="100%" height="100%"/><rect class="bar" width="0%" height="100%"/><text x="50%" y="70%" text-anchor="middle">0%</text></svg> </div> <div> <div class="country" rate="73.2%">Russia</div> <svg class="tbc"><rect class="bg" width="100%" height="100%"/><rect class="bar" width="0%" height="100%"/><text x="50%" y="70%" text-anchor="middle">0%</text></svg> </div> <div> <div class="country" rate="81.2%">UK</div> <svg class="tbc"><rect class="bg" width="100%" height="100%"/><rect class="bar" width="0%" height="100%"/><text x="50%" y="70%" text-anchor="middle">0%</text></svg> </div> <div> <div class="country" rate="11.5%">Burundi</div> <svg class="tbc"><rect class="bg" width="100%" height="100%"/><rect class="bar" width="0%" height="100%"/><text x="50%" y="70%" text-anchor="middle">0%</text></svg> </div> <div class="info"><a href="http://www.worldometers.info/world-population/population-by-country/" target="">Source: www.worldometers.info/</a>