Как сделать чтобы progress оставался немного заполненным JS

Question

Как сделать, чтобы если число процентов от 0% до 10%, то прогресс бар был заполнен как на 10%. А в остальных случаях обычное поведение прогресс бара.

const progressBarSelector = document.querySelector('.progress-bar');

class ProgressBar {
  constructor($bar) {
    this.$bar = $bar;
    this.$free = $bar.querySelector('.progress-bar__free');
    this.$percentage = $bar.querySelector('.progress-bar__percentage');

    this.initialize();
  }

  initialize() {
    const observer = new window.MutationObserver(() => {
      this.progress(this.$bar.dataset.value);
    });

    observer.observe(this.$bar, {
      attributeFilter: ['data-value']
    });

    this.progress(this.$bar.dataset.value);
  }

  progress(percentage) {
    let val = Number(percentage);
    const width = (90 * Number(percentage)) / 100;

    if (val > 100) val = 100;
    else if (val < 0 || Number.isNaN(val)) val = 0;

    this.$free.style.width = `${90 - width}%`;
    this.$percentage.innerText = `${val}%`;
  }
}

const progressBar = new ProgressBar(progressBarSelector);

.aprogress-bar {
  display: inline-block;
  border: 1px solid #333;
  width: 600px;
  position: relative;
  flex-grow: 1;
  margin-bottom: 20px;
  height: 54px;
  margin-right: 20px;
  border-radius: 6px;
  @media screen and (min-width: 835px) {
    margin-bottom: 0;
  }
}

.progress-bar {
  background-color: #fff;
  background-image: linear-gradient(90deg, rgb(254, 92, 1) 0%, rgb(249, 218, 61) 50%, rgb(51, 235, 84) 100%);
  position: relative;
  overflow: hidden;
  text-align: right;
}

.progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

.progress-bar__free {
  display: inline-block;
  position: relative;
  height: 100%;
  background-color: #fff;
  transition: all .3s;
  z-index: 1;
}

.progress-bar__free::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -40px;
  display: block;
  width: 50px;
  height: 100%;
  background-image: linear-gradient(270deg, #fff 0%, #fff 25%, transparent 100%);
}

.progress-bar__percentage {
  display: block;
  float: left;
  margin-top: 10px;
  margin-left: -50px;
  font-size: 18px;
  line-height: 32px;
  font-weight: 600;
  color: #fff;
  z-index: 1;
}

<div class="aprogress-bar progress-bar" data-value="10">
  <span class="progress-bar__free">
    <span class="progress-bar__percentage"></span>
  </span>
</div>

Answer 1

Будет достаточно добавить условие что если значение меньше или равно 10, то показывать как 10:

progress (percentage) {
    let val = Number(percentage)
    const width = (90 * Number(percentage)) / 100

    if (val <= 10) {
        val = 10
    }
    
    if (val > 100) {
        val = 100
    } else if (val < 0 || Number.isNaN(val)) {
        val = 0
    }

    this.$free.style.width = `${90 - width}%`
    this.$percentage.innerText = `${val}%`
}

БЛОГ НА HUSL

Как сделать чтобы progress оставался немного заполненным JS

Ответы (1 шт):