Fuel Tank

by DimK10

HTML

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

CSS

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

JavaScript

$(document).ready(function(){

$(".tk").each(function(){
var amount = $('.lq').attr('data-amount')
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) + "%");
    }
  });
  });
});