use css animations for the progressbar (better performance?)

htdocs/css/openwebrx.css

@@ -551,13 +551,23 @@ img.openwebrx-mirror-img
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
+    overflow: hidden;
 }
 
-.openwebrx-progressbar-bar
-{
+.openwebrx-progressbar-bar {
+	background-color: #00aba6;
 	border-radius: 5px;
 	height: 100%;
 	width: 100%;
+	position: absolute;
+	left: -100%;
+	transition-property: left background-color;
+	transition-duration: 1s;
+	transition-timing-function: ease-in-out;
+}
+
+.openwebrx-progressbar--over .openwebrx-progressbar-bar {
+    background-color: #ff6262;
 }
 
 .openwebrx-progressbar-text
@@ -566,6 +576,7 @@ img.openwebrx-mirror-img
 	left:0px;
 	top:4px;
 	width: inherit;
+	z-index: 1;
 }
 
 #openwebrx-panel-status

htdocs/lib/ProgressBar.js

@@ -3,7 +3,6 @@ ProgressBar = function(el) {
     this.$innerText = $('<span class="openwebrx-progressbar-text">' + this.getDefaultText() + '</span>');
     this.$innerBar = $('<div class="openwebrx-progressbar-bar"></div>');
     this.$el.empty().append(this.$innerText, this.$innerBar);
-    this.$innerBar.css('width', '0%');
 };
 
 ProgressBar.prototype.getDefaultText = function() {
@@ -19,7 +18,7 @@ ProgressBar.prototype.set = function(val, text, over) {
 ProgressBar.prototype.setValue = function(val) {
     if (val < 0) val = 0;
     if (val > 1) val = 1;
-    this.$innerBar.stop().animate({width: val * 100 + '%'}, 700);
+    this.$innerBar.css({left: (val - 1) * 100 + '%'});
 };
 
 ProgressBar.prototype.setText = function(text) {
@@ -27,7 +26,7 @@ ProgressBar.prototype.setText = function(text) {
 };
 
 ProgressBar.prototype.setOver = function(over) {
-    this.$innerBar.css('backgroundColor', (over) ? "#ff6262" : "#00aba6");
+    this.$el[over ? 'addClass' : 'removeClass']('openwebrx-progressbar--over');
 };
 
 AudioBufferProgressBar = function(el) {