Create Animation With Css Gradient And Javascript

I am working on an cordova application that allows us to scan rfid tags. Based of the RSSI signal strength I need to display a bar that shows how close or far the rfid tag is. The

Solution 1:

For better performance it is best to animate scale rather than height. Source (really good article on animation performance).

Here is an example of how you could do it. It's not perfect but hopefully it should give you a good starting point.

var input = document.querySelector('input');

input.addEventListener('input', function() {
    var value = this.value / 100;
    var bar = document.querySelector('.meter-bar');
    
    bar.style.transform = 'scaleY(' + value + ')';
    // Adjust background size to account for the scale change, there is probably a better solution
    bar.style.backgroundSize = '200px ' + (300 / value) + 'px';
});

input {
    width: 200px;
}

.meter {
    width: 200px;
    height: 300px;
    margin-top: 20px;
    background-color: #e5e5e5;
}

.meter-bar {
    width: 100%;
    height: 100%;
    background-color: #333;
    background-image: linear-gradient(to top, #64b572 0%, #9fc63d 50%, #f63908 100%);
    background-size: 200px 0;
    background-position: bottom;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 1s ease, background-size 1s ease;
    opacity: 0.8;
}

<input type="range" min="0" max="100" step="1" value="0">
    
<div class="meter">
    <div class="meter-bar">
    </div>
</div>

Solution 2:

You could animate the height with javascript and the gradient with css. I am updating here on mouse over but you could have it update with every scan input and accomplish the same thing. You would just need to set up more css classes for any other gradient variations you want.

var min = 15;
var max = 100
function randPercent(){
  return Math.floor(Math.random()*(max-min+1)+min);
}


$( ".statusBar" ).mouseover(function(){

  var barSize = randPercent();

  if (barSize > 50) {
    $(this).addClass('close');
  } else {
    $(this).removeClass('close');
  }

  $(this).animate({
    height: barSize+'%'
    },300
  );
  
});

.wrapper {
  height:100px;
  position:relative;
}
.statusBar {
  width:50px;
  min-height:10px;
  border:1px solid black;
  position:absolute;
  bottom:0;
}
.bg {
  -webkit-transition: background 1s ;
  -moz-transition: background 1s ;
  -ms-transition: background 1s ;
  -o-transition: background 1s ;
  transition: background 1s ;

  background: rgb(71,234,46);

}

.bg.close {
  background: rgb(247,247,49);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="statusBar  bg"></div>
</div>