Прогресбар с инвертацией цвета для значения

Question

Подскажите как можно улучшить текущий прогресбар ?

//// Progress Bar

function initializeProgressBar() {
  var currentVal = 0;
  var progressBarBox = $(".progressBar");
  var successBox = $(".box_success");

  var val = $(".box_loading__val"),
    progressBar = $(".box_loading__progressbar"),
    perc = 6;

  function counter() {
    currentVal += perc;
    if (currentVal >= 100) {
      /// Finished work progressBar
      clearInterval(interval);
      currentVal = 100;
      setTimeout(showSuccessMessage, 400);
    }
    val.text(currentVal);
    progressBar.css("width", currentVal + "%");
    return currentVal
  }

  function showSuccessMessage() {
    progressBarBox.addClass("hidden");
    successBox.removeClass("hidden");
  }

  var interval = setInterval(counter, 100);
}

initializeProgressBar();

.box_callback__loadingText {
  min-height: 36px;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #262626;
}

.box_loading {
  overflow: hidden;
  margin-top: 50px;
  position: relative;
  border: 1px solid #000;
  height: 54px;
  width: 100%;
  background: rgba(107, 126, 154, 0.1);
  border-radius: 6px;
}

.box_loading__progressbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #07B53B;
  z-index: 2;
}

.box_loading__val {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 54px;
  font-size: 18px;
  text-align: center;
  color: #262626;
  z-index: 3;
}

.box_loading__val:after {
  content: "%";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progressBar ">
  <p class="box_callback__loadingText">Processando...</p>
  <div class="box_loading">
    <div class="box_loading__progressbar"></div>
    <span class="box_loading__val">0</span>
  </div>
</div>

Я думал над идей, что б когда зеленый свет доходил до цифры, она меняла цвет на белый, что б лучше было видно, но не знаю как это правильно сделать. Может ещё какие идеи есть по улучшению?

Answer 1

Так вас устроит?

  function initializeProgressBar() {
  var currentVal = 0;
  var progressBarBox = $(".progressBar");
  var successBox = $(".box_success");

  var box       = $(".box_loading");
  var val_black = $(".box_loading__val_black"),
      val_white = $(".box_loading__val_white"),
    progressBar = $(".box_loading__progressbar"),
    perc = 1;

  function counter() {
    currentVal += perc;
    if (currentVal >= 100) {
      /// Finished work progressBar
      clearInterval(interval);
      currentVal = 100;
      setTimeout(showSuccessMessage, 400);
    }
    val_black.text("прогресс, чтоб его " + currentVal + "%");
    val_white.text("прогресс, чтоб его " + currentVal + "%");
    val_white.css("left", (box.width() / 2) + "px");
    progressBar.css("width", currentVal + "%");
    return currentVal
  }

    function showSuccessMessage() {
        progressBarBox.addClass("hidden");
        successBox.removeClass("hidden");
    }

    var interval = setInterval(counter, 100);
}

initializeProgressBar();

.box_callback__loadingText {
  min-height:       36px;
  font-weight:      500;
  font-size:        18px;
  line-height:      24px;
  letter-spacing:   0.5px;
  color:            #262626;
}

.box_loading {
  overflow:         hidden;
  margin-top:       50px;
  position:         relative;
  border:           1px solid #000;
  height:           54px;
  width:            100%;
  background:       rgba(107, 126, 154, 0.1);
  border-radius:    6px;
}

.box_loading__progressbar {
  position:         absolute;
  top:              0;
  left:             0;
  width:            0;
  height:           100%;
  background-color: #07B53B;
  z-index:          2;
  overflow:         hidden;
}

.box_loading__val_white,
.box_loading__val_black {
    display:        inline-block;
  position:         absolute;
  top:              50%;
  left:             50%;
  
  width:            100%;
  
  transform:        translate(-50%, -50%);
  line-height:      54px;
  font-size:        18px;
  text-align:       center;
}

.box_loading__val_white {
    color:          white;
}

.box_loading__val_black {
    color:          #262626;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progressBar ">
    <p class="box_callback__loadingText">Processando...</p>
    <div class="box_loading">     
        <span class="box_loading__val_black">0</span>
        <div class="box_loading__progressbar"><span class="box_loading__val_white">0</span></div>
    </div>
</div>

Основные моменты:

выводим две надписи о прогрессе - в цвете на прогрессбаре и в цвете вне прогрессбара
одна из надписей должна находиться в box_loading__progressbar, чтобы ее можно было резать размером границами этого box_loading__progressbar через свойство overflow: hidden
эту надпись позиционируем с помощью javascript при каждом изменении прогрессбара
чтобы текст надписей не плавал при изменении размера прогрессбара добавляем стили display: inline-block; и width: 100%;

БЛОГ НА HUSL

Прогресбар с инвертацией цвета для значения

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