Creating a dynamic Tank level/meter using html and css

Question

I am currently having problems creating a \'tank gauging system\' within my project. I am using MVC and the by using the following markup, I have achieved this:

Answer 1

I think I have achieved the requested, by playing around with positioning (absolute will respect the parent block element with position relative or absolute - so it is easier to just use bottom: 0 - also that makes the div to increase its height from botton to top automatically)

html

<div class="tk">
<h3 class="text"></h3>
  <div class="lq" data-amount="69">
    <div class="ring"></div>
  </div>
</div>

css file:

.tk {
    position:relative;
    width:40%; 
    height:100px;
    padding-top:40px;
    margin: 0 auto;
    background:rgba(56,56,56,0.8);
    border-radius: 100%/40px;
    border-bottom:3px solid #000;
    text-align:center;
    z-index:1;
    overflow:hidden;
    }
    
.lq {
  position: absolute;
  background:rgba(128,128,128,0.99);
  width: 100%;
  height:0;
  bottom: 0;
  border-radius:100%/40px;
  border-bottom:3px solid #000;
}


.ring {
  position: absolute;
  border-radius:100%;
  top: 0;
  width: 100%;
  height:40%;
  content: '';
  border:1px solid #000;
}
    
.text {
  display: block;
  position:absolute;
  top: 45%;
  left: 45%;
  z-index: 1;
}

js file (with jquery):

var quantity = amount;
$(this).find('.lq').animate({'height' : parseInt(amount) + '%'},1000);
  $('.ring').css({height : 100 - amount + 10 + '%'});
  $('.text').text(quantity  + '%'); 
  });
  $('.text').each(function(){
    var $this = $(this);
     jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $this.text(Math.ceil(this.Counter) + "%");
    }
  });
  });
});

https://jsfiddle.net/DimK10/oqfz56ys/72/

Answer 2

If you just need to fill the tank, you may use a much simpler stucture to build the tank with two HTML elements, border-radius and a pseudo element.

Then you can use JS to change the height of the green area according to the value entered in the custom data attribute data-amount of the .tk div :

DEMO (change the value of the custom data attribute data-amount in the .tk div to change the height of the liquid).

var amount = $('.tk').attr('data-amount'),
    height = amount * 80/100 + 20;

$('.lq').css({height : height + '%'});

.tk{ /*Liquid Section*/
    position:relative;
    width:40%; 
    height:130px;
    padding-top:50px;
    margin: 0 auto;
    background:rgba(56,56,56,0.8);
    border-radius: 100%/40px;
    border-bottom:3px solid #000;
    text-align:center;
    z-index:1;
    overflow:hidden;

}
.tk:after, .lq{
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%;
    height:20%;
    z-index:-1;
}
.lq{
    background:rgba(128,128,128,0.99);
    height:80%;
    top:-2px;
    border-radius:100%/40px;
    border-bottom:3px solid #000;
}
.tk:after{
    height:20%;
    border:1px solid #000;
    border-radius:100%; /*makes circle at top*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tk" data-amount="40">
    40%
    <div class="lq"></div>
</div>

Answer 3

Although @web-tiki answer is perfectly good and accepted, I thought I must add another option for simple use-cases.

The following might not have been available or widely adopted at the time of the question, as it involves the HTMl5 tag </meter>

If the pseudo-3d effect is not a must, you could use the not-so-known HTML5 built in <meter> element. I have used it occasionally in the past.

basic syntax :

<meter id="fuel" name="fuel-so-so"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</mete

It is basically designed for such tasks, The only thing that you need to do is to rotate it 90 ( or 270 ) degrees. and for that you could use CSS. ( Fiddle )

It is also easily styled. other examples here and here.

of course it will not produce the same exact effect out-of-the-box ( like the accepted answer ) but I think it is still an option worth mentioning for future users who will bump into this question. ( and with some transparent-png overlay, it can actually be exactly the same.. )

For the JS part, a simple document.getElementById('fuel').setAttribute('value', myValue); should do the trick.

Another somewhat related SO question with nice fiddle to demonstrate dynamic control : how to change <meter> values?