use css animations for the progressbar (better performance?)

This commit is contained in:
Jakob Ketterl
2020-12-28 20:55:02 +01:00
parent 71043d4305
commit 993aa87776
2 changed files with 15 additions and 5 deletions

View File

@ -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) {