Как я могу сделать так, чтобы этот зеленый цвет шел снизу, а не справа

Question

Это анимация таймера, сделанная с использованием HTML, CSS, JavaScript и небольшого количества jQuery.

var value = 0;
var pos = 0;
var progressHidden = false;
var delay = 40;
var progressEL = $('progress');
var timer = setInterval(progress, 100);

function progress() {
  value++;

  if (value < 59) {
    progressEL.val(value);
    pos = 1 - (value / 85);
  } else if (value < (delay + 60)) {
    progressEL.val(59);
    pos = 0;
  } else {
    value = 0;
  }
  progressEL.css('background-position', '0' + pos + 'em');
  if (!progressHidden && value >= 60) {
    progressEL.addClass("hidden");
    progressHidden = true;
  } else if (progressHidden && value < 60) {
    progressEL.val(0);
    progressEL.removeClass("hidden");
    progressHidden = false;
  }
}

progress {
  appearance: none;
  position: relative;
  overflow: hidden;
  width: 2.3em;
  height: 1.8em;
  padding: 0;
  border: none;
  font-family: tahoma;
  font-size: 200px;
  transition: height 0.2s;
}

progress.hidden {
  height: 0;
  transition-delay: 0.4s;
}

progress::before {
  content: attr(value);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 0.70em;
  color: hsla(0, 0%, 100%, 0.2);
  background: linear-gradient( hsl(118, 97%, 50%), hsl(118, 97%, 50%), hsl(118, 97%, 50%) 90%) no-repeat center;
  background-position: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}

progress::-webkit-progress-bar,
progress::-webkit-progress-value {
  background: transparent;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 50px;
  background-color: black;
  background-size: cover;
  overflow: hidden;
}

html,
body {
  height: 100%;
}

<progress max="99"></progress>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

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

Answer 1

Я немного изменил ваш код. Я использовал переменную CSS для background-size и установил 0% как значение по умолчанию. И я изменил размер фона на значение.

var value = 0;
var pos = 0;
var progressHidden = false;
var delay = 40;
var progressEL = $('progress');
var timer = setInterval(progress, 100);

function progress() {
  value++;

  if (value < 59) {
    progressEL.val(value);
    pos = 1 - (value / 85);
  } else if (value < (delay + 60)) {
    progressEL.val(59);
    pos = 0;
  } else {
    value = 0;
  }
  
  progressEL[0].style.setProperty("--size", value + "%");
  
  if (!progressHidden && value >= 60) {
    progressEL.addClass("hidden");
    progressHidden = true;
  } else if (progressHidden && value < 60) {
    progressEL.val(0);
    progressEL.removeClass("hidden");
    progressHidden = false;
  }
}

progress {
  appearance: none;
  position: relative;
  overflow: hidden;
  width: 2.3em;
  height: 1.8em;
  padding: 0;
  border: none;
  font-family: tahoma;
  font-size: 200px;
  transition: height 0.2s;
}

progress.hidden {
  height: 0;
  transition-delay: 0.4s;
}

progress::before {
  content: attr(value);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 0.70em;
  color: hsla(0, 0%, 100%, 0.2);
  background: linear-gradient( hsl(118, 97%, 50%), hsl(118, 97%, 50%), hsl(118, 97%, 50%) 90%) no-repeat;
  background-position: bottom;
  background-size: 100% var(--size, 0%);
  -webkit-background-clip: text;
  background-clip: text;
}

progress::-webkit-progress-bar,
progress::-webkit-progress-value {
  background: transparent;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 50px;
  background-color: black;
  background-size: cover;
  overflow: hidden;
}

html,
body {
  height: 100%;
}

<progress max="99"></progress>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>